如何在 VueJS 2 的 HTML(PUG) 中添加动态自定义属性？答案

【问题标题】：How to put a dynamic custom attribute in HTML(PUG) in VueJS 2?如何在 VueJS 2 的 HTML(PUG) 中添加动态自定义属性？
【发布时间】：2020-06-24 21:10:57
【问题描述】：

我正在使用带有 Pug 的 VueJs 2，并且我有以下代码：

.mb-3(v-for="(payments, index) in historyPayments" :key="index" no-body='')
  b-btn(variant="default" block='' href='#' v-b-toggle.accordion2016="") // I need to change accordion2016 using a dynamic variable
    | {{ index }}

在我的迭代器中，我想将数据作为属性放入 HTML 标记中。我的当前属性是：v-b-toggle.accordion2016，但我想将其更改为以下代码中的内容：

.mb-3(v-for="(payments, index) in historyPayments" :key="index" no-body='')
  b-btn(variant="default" block='' href='#' "`v-b-toggle.#{index}`"="")
    | {{ index }}

如何使用 Pug 动态更改属性？我试过了，但出现语法错误。

【问题讨论】：

标签： attributes vuejs2 pug

【解决方案1】：

你应该像这样使用 v-bind：

v-bind="{ [`v-b-toggle.${index}`]: '' }"

通过使用 ES6 模板字符串语法和单元素数组，您可以在属性中绑定变量。最后只需要使用 v-bind 在组件中动态绑定属性即可。

【讨论】：

【解决方案2】：

您可以使用 v-b-toggle 切换一个值，并将您的 href 作为计算值，该值根据您切换的值返回

IE：

computed: {
  computedHref () {
    return toggledValue ? "first-href-link" : "second-href-link"
  }
}

并且像这样在你的href中使用computedHref值

b-btn(variant="default" block='' href='computedHref')

【讨论】：

【解决方案3】：

如果你使用bootstrap vue，那么你可以这样做：

.mb-3(v-for="(payments, index) in historyPayments" :key="index" no-body)
  b-btn(variant="default" block href='#' v-b-toggle="`accordion${index}`")
    | {{ index }}

【讨论】：