Question

我正在尝试创建一个具有在同一元素中打开模式的按钮的组件。我需要将属性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)

我该怎么办？

Answer 1

将其移至选项并在其上调用v-bind。在不使用排他参数的情况下调用v-bind时，对象的所有参数都将应用于元素：

<button @click="onClick(data.id)"  v-bind="params"> Details </button>

computed: {
  params() {
    return {
      [`-v-modal-modal-[[${this.data.id}]]`]: true
    }
  }
}

VueJS-无法动态生成属性

1 个答案: