能够在循环中使用 ( v-if ) 切换真/假

Question

我在问关于在 Vue.js 中隐藏和显示一个元素

我一直用这个

<ele v-if="value" />

然后在 Vue Instance 数据对象中设置 {value}，然后切换 True/False 以切换可见，但现在在我的情况下，我的 v-if 条件放入了某个元素，然后使用 v-for 指令创建该元素

类似的东西

<div v-for="item in items" >
 <ele v-if="value" :key="item.i" />
 <ele v-if="value" :key="item.i" />
 <ele v-if="value" :key="item.i" />

     // this button fire a method for Change (toggle) value (used for v-if)
   <button @click="ToggleValue" > update </button>
</div>

在我看来，我有一个包含一些行的表，每行都有一些字段（所有字段都有 v-if 指令），并且在每一行中我们都有用于触发方法的按钮

现在我的问题是什么？！！

最后我的表正在这样做，当单击每个按钮 ToggleValue 方法执行并切换（值）对象的值时，现在所有行中的所有字段都会更改值（所有事情都正确：D）

但我想点击每一行中的每个按钮，只需更改该行的值

我有假方法

< ele v-if="value(item.id)" />
.........
.........
<button @click="ToggleValue(itme.id)" > 

如果我的循环索引是常量和静态我使用这种方式，但现在循环中的项目是动态的

这里的一切都在我的笔下，谢谢你给我时间

https://codepen.io/hamidrezanikoonia/pen/OQGrPB?editors=1100

Answer 1

不要使用单个value，而是将value 转换为对象（或数组）并通过item.id 对其进行索引。

更新的 codepen： https://codepen.io/acdcjunior/pen/MQRZmK?editors=1010

在您的笔中，JavaScript：

    ...
    ],
    update_:false
  },
  methods: {
    set_update() {
      this.update_ = !this.update_;
    }
  }

变成：

    ...
    ]
    update_: {1: false, 2: false, 3: false}
  },
  methods: {
    set_update(id) {
      this.update_[id] = !this.update_[id];
    }
  }

还有模板：

<td :key="getValue.id+4" v-if="update_" mode="in-out" >  {{ getValue.rate_curr }} </td>
...
<button @click="set_update()" type="button" class="btn btn-primary">  Update </button>

变成：

<td :key="getValue.id+4" v-if="update_[getValue.id]" mode="in-out" >  {{ getValue.rate_curr }} </td>
...
<button @click="set_update(getValue.id)" type="button" class="btn btn-primary">  Update </button>