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

我正在开发一个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>

{{{movie.name}

我只想看那些有身份证的电影，在这种情况下，不应该放映托尔。我尝试过使用v-if，但出现了以下错误：“应将'v-for'指令中的'movies'变量替换为返回筛选数组的计算属性。不应将'v-for'与'v-if'混合使用。

---

谢谢，希望你能帮助我

用于救援的计算属性：

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>

{{{movie.name}

救援的计算属性：

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>

{{{movie.name}

或者您可以添加条件以渲染到li标记，如v-show=“movie.id”

或按如下方式筛选数据集：

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

{{{movie.name}

或者您可以添加条件以渲染到li标记，如v-show=“movie.id”

或按如下方式筛选数据集：

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

{{{movie.name}

movies.filter（m=>'id'在m中）

是您要找的。

movies.filter（m=>'id'在m中）

是您要找的。