Question

我在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动态更改属性？我已经尝试过，但是出现语法错误。

Answer 1

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

IE：

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

就像这样在您的href中使用计算的Href值

b-btn（variant =“ default” block =''href ='computedHref'）

Answer 2

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

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

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

Answer 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 }}

如何在VueJS 2的HTML（PUG）中放置动态自定义属性？

3 个答案: