for循环遍历数组并将类绑定到vuejs中的元素类属性

Question

我正在尝试将类名绑定到类属性中，vuejs 循环遍历这样的数组：

这里我通过 :class="paymentTypeClass(value)" 中的方法调用来绑定到 vue 模板，如下所示：

<li v-for="card in paymentType" class="o-pf-list__item" :class="paymentTypeClass(value)">
  {{ card }}
</li>

new Vue ({
  el: '#app',
  data: {
  paymentType: ['paymentType1', 'paymentType2', 'paymentType3', 'paymentType4', 'paymentType5']
  },
  methods: {
    functionName: function(value) {
      var i = 0;

      for (i in this.paymentType) {

        value = 'o-pf-list__item--' + this.paymentType[i];

      }
      return value + ' pull-left';
    }
  }
});

结果是它只打印出数组中的最后一个索引值，因此实际上是覆盖。为什么是这样？请帮忙。

登录控制台：

o-pf-list__item--bitcoin
app.js:51663 o-pf-list__item--credit
app.js:51663 o-pf-list__item--debitcard
app.js:51663 o-pf-list__item--eft
app.js:51663 o-pf-list__item--masterpass
app.js:51663 o-pf-list__item--bitcoin
app.js:51663 o-pf-list__item--credit
app.js:51663 o-pf-list__item--debitcard
app.js:51663 o-pf-list__item--eft
app.js:51663 o-pf-list__item--masterpass
app.js:51663 o-pf-list__item--bitcoin
app.js:51663 o-pf-list__item--credit
app.js:51663 o-pf-list__item--debitcard
app.js:51663 o-pf-list__item--eft
app.js:51663 o-pf-list__item--masterpass
app.js:51663 o-pf-list__item--bitcoin
app.js:51663 o-pf-list__item--credit
app.js:51663 o-pf-list__item--debitcard
app.js:51663 o-pf-list__item--eft
app.js:51663 o-pf-list__item--masterpass
app.js:51663 o-pf-list__item--bitcoin
app.js:51663 o-pf-list__item--credit
app.js:51663 o-pf-list__item--debitcard
app.js:51663 o-pf-list__item--eft
app.js:51663 o-pf-list__item--masterpass

Answer 1

您的代码有点混乱。

paymentTypeClass 是什么样的？看起来您想要基于您的逻辑的元素上的所有类？如果是这样，您可以这样做：

paymentTypeClasses () {
  const classes = this.paymentType.map(type => 'o-pf-list__item--' + type)
  classes.push('pull-left')
  return classes
}

那就做吧

:class="paymentTypeClasses()"

或

:class="[paymentTypeClasses()]

（以后更容易添加更多类）