Vue.js 如何在 v-for 循环内切换单个 v-if div？

Question

我想为单击的v-for循环中的每个帖子显示/隐藏下拉菜单：

<div v-for="(post, index) in posts" :key="index" >
    <div v-on:click.prevent="toggleDropDown(post)">Show/hide menu
    </div>
   <div  v-if="post.showDropDown"> 
      <ul class="menu">         
          <li><a href="#" >Edit</a></li>
          <li><a href="#" >Delete</a></li>
      </ul>
    </div>
    <div>
         {{post.body}}

    </div> 
</div>

和方法：

toggleDropDown(post) {
   if (!post.showDropDown) {     
      post.showDropDown =true;   
   } else {       
      post.showDropDown =false;  
   }
  },

但它不起作用。 单击“ Show/hide menu时没有任何反应

请注意， posts是从服务器获取的，并且post对象没有showDropDown字段。

而不是v-if="post.showDropDown"我可以简单地使用"showDropDown=!showDropDown"但是所有帖子上的所有菜单都一起打开/关闭，这不是故意的。

我该如何解决？

Answer 1

这可能是 Vue 反应性问题。 您可以尝试使用Vue.set

更改您的 html 代码以传递index而不是post

<div v-on:click.prevent="toggleDropDown(index)">Show/hide menu
</div>

然后在javascript中

toggleDropDown(index) {
 if (!this.posts[index].showDropDown) {
    this.$set(this.posts[index], 'showDropDown', true)
 } else {       
    this.$set(this.posts[index], 'showDropDown', false)  
 }
}

如果它不起作用，您可以尝试使用JSON.parse(JSON.stringify())进行深度复制

toggleDropDown(index) {
  this.posts[index].showDropDown = !this.posts[index].showDropDown
  this.posts = JSON.parse(JSON.stringify(this.posts))
}