仅显示具有某些属性的元素 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: () => ({&nbsp; movies: [&nbsp; &nbsp;{name: 'spider-man', id: 3},&nbsp; &nbsp;{name: 'thor'},&nbsp; &nbsp;{name: 'x-men', id: 7}&nbsp; ]})...computed: {&nbsp; moviesWithId() {&nbsp; &nbsp; return this.movies.filter(movie => movie.id)&nbsp; }}...在你的模板中<ul>&nbsp; <li v-for="movie in moviesWithId" :key="movie.name">{{movie.name}}</li></ul>

Answer 2

或者你可以添加条件来渲染你的 li 标签，比如 v-show="movie.id"或者像这样过滤你的数据集：<li&nbsp;v-for="movie&nbsp;in&nbsp;movies.filter(movie&nbsp;=>&nbsp;movie.id)"&nbsp;:key="movie.name">{{movie.name}}</li>