将索引动态添加到属性

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

我以前没有使用过此框架，但查看第二个示例from the docs，我认为类似以下的内容应该可以工作。

<button v-on:click="changeRecord(element)" 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的值

 export default {
  data:()=> {
    return {
      message: 'Hello world!',
      id: 12345
    }
  },
  computed: {
    options() {
      return {
        [`v-b-modal.modal-${this.id}`]: "whatever"
      }
    }
  }
}