将索引动态附加到属性

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&nbsp;v-on:click="changeRecord(element)"&nbsp;v-b-modal="`modal-${index}`">Aendern</button>您需要确保index在设置v-for编辑：为清楚起见，上述方法有效，因为在 VueJS 中，指令的输入被评估为表达式。上面的例子使用了反引号字符串插值，但同样可以使用几乎任何有效的表达式来完成，比如"'modal-'+index"或基于我们正在循环的项目的某些属性"`modal-${item.id}`"。与指令不同，类或其他属性被解释为纯字符串，除非它们被绑定使用v-bind，在这种情况下它们被视为表达式。文档中的示例使用一个简单的字符串作为输入，因此很难从该特定示例中看出它可以以这种方式使用。

Answer 2

可以添加如下动态属性<p class="text" v-bind="options">{{ message }}</p>在 中computed，定义值options&nbsp;export default {&nbsp; data:()=> {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; message: 'Hello world!',&nbsp; &nbsp; &nbsp; id: 12345&nbsp; &nbsp; }&nbsp; },&nbsp; computed: {&nbsp; &nbsp; options() {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; [`v-b-modal.modal-${this.id}`]: "whatever"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }}