vue.js - 使用动态组件进行 v 验证

Question

我是 vuejs 的新手，我想在动态组件中添加验证。
我的代码是这样的:

<div class="widget-main  padding-6" v-for="serving in servingData">
<div class="form-group col-sm-5">
    <label for="form-field-unit">@lang('master_foods.unit')</label>
    <input name="unit" class="input-sm form-control" id="form-field-unit"  v-model="serving.unit" tabindex="23@{{$index}}" type="text" placeholder="Unit" v-validate:unit="rules.unit" required>
    <span v-cloak v-if="$master_food.unit.touched && $master_food.unit.invalid" class="text-danger">
        <div class="space-2"></div>                                 
        <div v-for="error in $master_food.unit.errors">
            <i class="ace-icon fa fa-circle red"></i>&nbsp;@{{ error.message }}
        </div>
    </span>
</div>
<div class="form-group col-sm-2" >
    <button tabindex="-1" class="btn btn-sm btn-grey" type="button" style="margin-top: 23px;" @click="removeServingData(serving)" v-if="$index>0">
        <i class="ace-icon fa fa-trash-o bigger-110"></i>
        Remove
    </button>
</div>

当我单击“添加更多”按钮时，我已在侧servingData数组中推送一条记录，并且每个字段都有删除按钮用于删除此字段。因此，如果用户添加了“N”个组件，那么我想验证每个组件。目前验证仅适用于最后一个组件，那么我该如何解决这个问题？

Answer 1

@test 您可以使用:field属性进行动态验证。下面我添加了一些示例代码

<div class="widget-main  padding-6" v-for="serving in servingData">
<div class="form-group col-sm-5">
    <label for="form-field-unit">@lang('master_foods.unit')</label>
    <input name="unit" class="input-sm form-control" id="form-field-unit"  v-model="serving.unit" tabindex="23@{{$index}}" type="text" placeholder="Unit" :field="'unit' + serving.servingId" v-validate="rules.unit" required>
    <span v-cloak v-if="$master_food['unit' + serving.servingId].touched && $master_food['unit' + serving.servingId].invalid" class="text-danger">
        <div class="space-2"></div>                                 
        <div v-for="error in $master_food['unit' + serving.servingId].errors">
            <i class="ace-icon fa fa-circle red"></i>&nbsp;@{{ error.message }}
        </div>
    </span>
</div>
<div class="form-group col-sm-2" >
    <button tabindex="-1" class="btn btn-sm btn-grey" type="button" style="margin-top: 23px;" @click="removeServingData(serving)" v-if="$index>0">
        <i class="ace-icon fa fa-trash-o bigger-110"></i>
        Remove
    </button>
</div>

我假设servingId用于区分特定记录。仅供引用:您不使用$index来区分数组记录，因为当我们删除或添加记录时它是可变的