在 v-for 循环 VueJs 中显示错误

Question

我尝试显示 v-for 中每个字段的错误。但是我得到一个错误“无法读取未定义的属性 '$error'”，我不确定为什么。

<b-row  v-for="(v,index) in $v.years.$each.$iter" :key="index">
    <b-col>
        <b-form-group>
            <b-form-select
                v-model="v.year.$model"
                :class="{
                    'is-invalid':$v.year.$error, 'is-valid':!$v.year.$invalid}"
            ></b-form-select>
            <div class="invalid-feedback" v-if="!$v.year.required">This field is required!</div>
        </b-form-group>
    </b-col>
</b-row>

validations: {
    years:{
        $each:{
            year:{
                required
            },
        },
    }
},

更新：

如果我从 :class 和 v-if 中删除 year，它会起作用，但如果我有一个错误，它会显示在每个字段上，而不是只显示一个。

Answer 1

这就是为什么您不应该使用如此混乱的命名方案。它找不到 $error 因为 $v 属性在你的循环中不存在。

您将变量命名为 v 而不是 $v:

v-for="(v,index) in $v.years.$each.$iter"

在 v-for 循环 VueJs 中显示错误

Display errors in v-for loop VueJs

vue.js

vuejs2

vuelidate