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

Question

我正在使用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 语句可以替换users[index].errors.includes('username')以检查是否存在错误，然后检查该错误数组是否包含用户名？

Answer 1

你可以做

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

这将处理undefined

Answer 2

虽然答案是绝对正确的。将此类计算与标记分开而又不做很多事情的一种方法是使用methods：

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