Vue.js 在vuejs中单击单个v卡的唯一标识按钮

我将vuejs与vuetify 1.5一起使用，我的代码有点卡住了。这里的问题是，我有一个对象数组，并且基于为对象数组中的所有值生成多个v卡

在多张卡片中，我有一个展开按钮，因此默认情况下，我只想显示4个值，单击展开按钮，其余值将显示在卡片和展开按钮中，但问题是所有卡片都有相同的展开按钮，因此，单击展开按钮时，所有卡片都在展开，其值都会显示，但我只想显示，这意味着当我单击“仅展开一张卡”值将展开，其余卡将不会展开

这是我的密码：-

expandToggleHandler（）{
this.isExpand=！this.isExpand
},

{{row[Object.keys（row）[0]]}


{{col}}
{{row[col]}
{{col}}
{{row[col]}
{{toggleexpandcollapse}

图为：-

在图中你们可以看到，我已经按下了单张卡的扩展按钮，但其他卡的事件也被触发

---

如何解决此问题请提供示例帮助。

您正在为多个

组件使用单个变量

isExpand

。为了解决您的问题，我建议将变量转换为数组，并使用

rowIndex

作为索引

变量声明应如下所示：

isExpand:[]

你的模板会像这样使用它

请注意，我将第二个

v-if

替换为

v-else

，因此

isExpand

变量不会被检查两次

方法将是：

expandToggleHandler（行索引）{
this.isExpand[rowIndex]=！this.isExpand[rowIndex]
}

您可以这样访问它：

{{isExpand[rowIndex]？'Collapse'：'Expand'}

---

我不知道切换ExpandandCollapse的作用是什么，但我猜它可以处理按钮标签。

答案是正确的，但我用相同的技巧解决了它。你认为这里的区别只是在你的expandToggleHandler中。iExpand需要反应性，这意味着我们必须使用$set使它在每个人中都能工作，有人知道如何在上图中的两列之间放置一个垂直分隔符吗？？