Javascript Vue.js:v-bind:class如果存在数组并且该数组包含某些内容

我正在使用Laravel和Vue.js创建多个用户。我正在创建一个用户数组，并填写将其保存到表中所需的字段。填写完所有字段后，我循环vue.js中的用户数组，并将它们逐个发送到服务器端。服务器端验证它们（用户名和电子邮件唯一值）。如果发生错误，它会将其发送回客户端。在客户端，循环停止，然后向用户添加和错误数组

this.users.user.push(response.data);

我希望以这种方式显示错误：

<td class="form-group" v-bind:class="{ 'has-error': users[index].errors.includes('username') }">
    <input v-model="user.username" type="text" class="form-control full-width">
</td>

问题是在服务器端进行验证之前，用户中没有错误数组。在将空数组添加到用户之前，我可以将其推送到用户模型中，但我想知道是否有其他方法可以实现这一点

是否有另一个if语句可以替换

用户[index].errors.includes（'username'）

以检查是否存在错误，然后将检查错误数组是否包含username？

您可以这样做

v-bind:class = "{ 'has-error': users && users[index] && users[index].errors && users[index].errors.includes('username') }"

---

这将处理未定义的

，尽管答案绝对正确。一种将此类计算与标记分开而不增加工作量的方法是使用

方法

：

v-bind:class="getMyClasses(index, 'username')" //replace username with the field name

methods: {
  getMyClasses: function (index, field) {
    return {
      has-error: this.users && this.users[index] &&
                 this.users[index].errors &&
                 this.users[index].errors.includes(field)
    }
  }
}

---

谢谢，这正是我需要的。我没有想到逻辑测试会在出现错误的时候停止。这也是一个很好的答案，你应该在函数中添加字段名称，而不是用户名。实际上，您的函数只适用于用户名。