动态追加索引到属性
动态追加索引到属性
提问于 2020-03-18 03:15:53
我有一个按钮元素：
<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。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-03-18 03:19:53
我以前没有使用过这个框架，但是看看第二个示例从医生那里，我认为下面这样的东西应该可以工作。
<button v-on:click="changeRecord(element)" v-b-modal="`modal-${index}`">Aendern</button>您需要确保在设置index时变量v-for是可用的。
编辑:为了清晰起见，上面的内容之所以有效，是因为在VueJS中，指令的输入被计算为表达式。上面的示例使用backticks字符串插值，但也可以使用几乎任何有效表达式(如"'modal-'+index" )或基于在"`modal-${item.id}`"上循环的项上的某些属性来实现。
与指令不同，类或其他属性被解释为普通字符串，除非它们使用v-bind绑定，在这种情况下，它们被视为表达式。文档中的示例使用一个简单的字符串作为输入，因此很难从该特定示例中看出它可以以这种方式使用。
Stack Overflow用户
发布于 2020-03-18 03:30:50
可以添加以下动态属性
<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"
}
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60738370
复制相关文章
相似问题
腾讯云开发者
