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

【问题标题】：Vue.js How to toggle individual v-if divs inside a v-for loop?Vue.js 如何在 v-for 循环中切换单个 v-if div？
【发布时间】：2019-01-04 09:47:07
【问题描述】：

我想在单击的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 字段。

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

我该如何解决？

【问题讨论】：

'请注意，帖子是从服务器获取的，并且帖子对象没有 showDropDown 字段。'好吧，showDropDown 属性在您的代码中是必不可少的。示例：jsfiddle.net/vapk2Lh5。换句话说，您可以通过将 showDropDown 属性添加到您的帖子对象来修复它。
好吧，恕我直言，这是不必要的开销。应该有办法解决它。
在这种情况下改写您的问题。现在你基本上在问：'我怎样才能解决不声明我的属性？并说在使用它们之前声明属性是不必要的开销，这没有任何意义。这就像“嗨，我的车不会动”，-“先生，你的车少了轮子”，“那只是不必要的开销”。
请在您的示例代码中添加更多内容，因为它没有给出清晰的图片，如上所述，如有必要，请改写。

标签： javascript vue.js

【解决方案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))
}

【讨论】：

如果传递了post对象，可以简化为：toggleDropDown(post) { this.$set(post, 'showDropDown', !post.showDropDown) }
@MaxSinev 您的解决方案运行良好且优雅。谢谢！