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>

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

使用动态组件进行v验证

0 个答案: