如何在Vuejs中将v-show与动态元素一起使用

Question

我有一个动态表渲染，其中表的列和行是动态渲染的。

因此，我在每一行中有两个同级<td>元素：

<td :key="`td3-${index}`" :id="`show_${key}`" v-show="`show_${key}`">
  <input type="text" :v-model="key" :name="key" :value="entry[key]" />
</td>
<td :key="`td4-${index}`">
  <a href="#" @click="showField(key)">Edit</a>
</td>

在第二个onclick中链接的<td>事件中，我必须显示和隐藏第一个<td>元素。由于它是动态的，因此我将有多行。因此，我在数据中声明了一个动态布尔值，以根据同一行中另一个<td>的点击来显示和隐藏特定的<td>。

v-show="`show_${key}`"-这是带有动态键的show属性

  show_firstname: false,
  show_lastname: false,
  show_email: false,
  show_orgname: false

我为每一行中的每个<td>创建了单独的布尔元素。

但是，每当我单击第二个v-show元素时更改<td>属性的值时，都没有任何区别。因此我无法显示或隐藏<td>。也许v-show采用"`show_${key}`"作为字符串值，不能正确替换true或false。有人可以帮我实现这个目标吗？

Answer 1

为什么不尝试在对象中而不是在平面属性列表中组织show _？

https://codesandbox.io/embed/vue-template-csncc?fontsize=14&hidenavigation=1&theme=dark