将索引动态附加到属性
Append index dynamically to attribute
我有这个按钮元素:
<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.
我以前没有使用过这个框架,但看了第二个例子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}`"
的项目上的某些 属性 来完成。
与指令不同,class 或其他属性被解释为普通字符串,除非它们使用 v-bind
绑定,在这种情况下它们被视为表达式。文档中的示例使用一个简单的字符串作为输入,因此很难从该特定示例中判断它可以以这种方式使用。
可以添加如下动态属性
<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"
}
}
}
}
我有这个按钮元素:
<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.
我以前没有使用过这个框架,但看了第二个例子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}`"
的项目上的某些 属性 来完成。
与指令不同,class 或其他属性被解释为普通字符串,除非它们使用 v-bind
绑定,在这种情况下它们被视为表达式。文档中的示例使用一个简单的字符串作为输入,因此很难从该特定示例中判断它可以以这种方式使用。
可以添加如下动态属性
<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"
}
}
}
}