Vue.js 添加 class 动态值

Question

我有一组错误通过 json 传递到页面，如下所示；

"errors": [
    {
      "additional.1": [
        "[errored] field is required."
      ]
    },
    ....
]

在 vue.js html 中，我试图通过使用 :class 属性将 class 添加到出错的字段。基本上我需要查看 errors[0][additional.1] 是否未定义。我遇到的唯一麻烦是 [additional.[builder.key]]。似乎没有一种评估方法，因此它等同于 additional.1 或 builder.key 应该是什么。

 <div :class="{'has-error' : typeof errors[$index] != 'undefined' && typeof errors[$index][additional.[builder.key]] != 'undefined' }" >

如有任何帮助，我们将不胜感激。

Answer 1

我会将代码提取到一个方法中以使其更具可读性并清理模板：

<div :class="{'has-error': hasErrorAtIndex($index)}">

JS:

methods: {
  hasErrorAtIndex: function (index) {
    return typeof this.errors[index] != 'undefined' && this.errors[index].hasOwnProperty('additional.' + this.builder.key)
  }
}

...假设我猜对了 builder.key 的上下文

Vue.js 添加 class 动态值

Vue.js add class with dynamic values

html

validation

vue.js