javascript - 将索引动态附加到属性

Question

我有这个按钮元素:

<button v-on:click="changeRecord(element)" v-b-modal.modal-5>Aendern</button>

它是在 v-for 循环内动态生成的。我不想像上面那样硬编码属性名称 v-b-modal.modal-5 我想像这样连接它:

v-b-modal.modal-{{index}}

有办法做到这一点吗？我正在使用 vue-cli 3 和 bootstrap-vue。

Answer 1

我以前没有使用过这个框架，但看看第二个例子 from the docs我认为像下面这样的东西应该有效。

<button v-on:click="changeRecord(element)" v-b-modal="`modal-${index}`">Aendern</button>

您需要确保设置 v-for 时变量 index 可用

编辑:为了清楚起见，上面的代码是有效的，因为在 VueJS 中指令的输入被评估为表达式。上面的示例使用反引号字符串插值，但使用几乎任何有效表达式(例如 "'modal-'+index" 或基于我们正在循环的项目的某些属性)也可以完成相同的操作 “`modal-${item.id}`”。

与指令不同，类或其他属性被解释为纯字符串，除非它们使用 v-bind 绑定(bind)，在这种情况下它们被视为表达式。文档中的示例使用一个简单的字符串作为输入，因此很难从该特定示例中看出它可以以这种方式使用。