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))
}

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

1 个答案: