仅显示具有某些属性的元素 Vue JS

Question

我正在开发一个 Vue 应用程序，我有一个这样的电影列表：movies [  {name: 'spider-man', id: 3},  {name: 'thor'},  {name: 'x-men', id: 7}]这是我的模板<ul> <li v-for="movie in movies" :key="movie.name">{{movie.name}}</li></ul>我只想展示拥有 ID 的电影，在这种情况下，不应该展示雷神。我尝试过使用 v-if，但出现此错误：“'v-for' 指令中的 'movies' 变量应替换为返回过滤数组的计算属性。你不应该将 'v-for' 与'v-如果'”。谢谢，希望你能帮助我！

Answer 1

计算属性来拯救：

data: () => ({

  movies: [

   {name: 'spider-man', id: 3},

   {name: 'thor'},

   {name: 'x-men', id: 7}

  ]

})

...

computed: {

  moviesWithId() {

    return this.movies.filter(movie => movie.id)

  }

}

...

在你的模板中

<ul>

  <li v-for="movie in moviesWithId" :key="movie.name">{{movie.name}}</li>

</ul>

Answer 2

或者你可以添加条件来渲染你的 li 标签，比如 v-show="movie.id"

或者像这样过滤你的数据集：

<li v-for="movie in movies.filter(movie => movie.id)" :key="movie.name">{{movie.name}}</li>