将索引动态附加到属性

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

我以前没有使用过这个框架，但从文档中的第二个例子来看，我认为下面的内容应该有效。

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

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

EDIT：为了清楚起见，上述方法之所以有效，是因为在VueJS中，指令的输入被计算为表达式。上面的例子使用了backticks字符串插值，但同样可以使用几乎任何有效的表达式(如"'modal-'+index"(或基于我们在"`modal-${item.id}`"上循环的项的某些属性来完成。

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

Answer 2

可以添加动态属性，如以下

<p class="text" v-bind="options">{{ message }}</p>

在computed内部，定义options的值

export default {
data:()=> {
return {
message: 'Hello world!',
id: 12345
}
},
computed: {
options() {
return {
[`v-b-modal.modal-${this.id}`]: "whatever"
}
}
}
}