VueJS -无法动态生成属性
VueJS -无法动态生成属性
提问于 2019-12-31 09:23:08
我正在尝试创建一个组件，该组件具有在同一元素中打开模式的按钮。我需要将v-b-modal-modal-[[this.data.id]]属性设置为此模式：
Vue.component('vue-tables-2-product', {
delimiters: ['[[', ']]'],
props: ['data', 'index', 'column'],
template: `<div>
<b-modal id="modal-1" title="BootstrapVue">
<p class="my-4">[[ this.data.name ]]</p>
</b-modal>
<button @click="onClick(data.id)" :v-b-modal-modal-[[this.data.id]]="this.data.id">Detail</button></div>`,
});但是Vue会引发一个错误：
vue.js:634 [Vue warn]: Error in nextTick: "InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': 'v-b-modal-modal-[[this.data.id]]' is not a valid attribute name."
vue.js:1897 DOMException: Failed to execute 'setAttribute' on 'Element': 'v-b-modal-modal-[[this.data.id]]' is not a valid attribute name.
at baseSetAttr (https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js:6772:10)
at setAttr (https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js:6747:7)
at Array.updateAttrs (https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js:6702:9)
at invokeCreateHooks (https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js:6058:24)
at createElm (https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js:5945:13)
at createChildren (https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js:6042:11)
at createElm (https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js:5943:11)
at createChildren (https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js:6042:11)
at createElm (https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js:5943:11)
at VueComponent.patch [as __patch__] (https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js:6464:9)我该怎么办？
回答 1
Stack Overflow用户
发布于 2019-12-31 09:56:11
将其移动到一个选项，并对其调用v-bind。在不带独占参数的情况下调用v-bind时，对象的所有参数都会应用于元素：
<button @click="onClick(data.id)" v-bind="params"> Details </button>
computed: {
params() {
return {
[`-v-modal-modal-[[${this.data.id}]]`]: true
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59538573
复制相关文章
相似问题
腾讯云开发者
