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用于区分特定的record.FYI:You不使用$index来区分数组记录，因为当我们删除或添加记录时它是可变的