使用 v-validate 字段绑定验证动态字段

Question

我正在使用以下代码在日期时间选择器中验证日期：

 <tr v-for="(input,k) in inputs" :key="k">
    <datetime v-validate="validators.ArrivalDate" format="YYYY-MM-DD H:i:s" name="arrivalDateTime" v-model="input.arrivalDateTime" ></datetime> 
 <tr>

script:

data(){
return {
validators: {
            ArrivalDate: {
                required: true,
                date_format: 'yyyy-MM-dd HH:mm:ss',
                after: this.inputs.departureDateTime,
            }
            },
  inputs: [
              {
                name:'',
                arrivalDateTime: '',
                departureDateTime:'',
}]
..

我希望到达日期时间应该大于this.inputs.departureDateTime出发字段日期时间。唯一的问题是我还想将字段索引传递给 after:this.inputs.departureDateTime。非常感谢任何帮助。

Answer 1

您可以使用 v-validate 字符串，其中包含每个 v-for 迭代器的动态值 after：

<tr v-for="(input,k) in inputs" :key="k">
  <datetime 
    name="departureDateTime"
    v-validate="'date_format:yyyy-MM-dd HH:mm:ss|required'"
    v-model="input.departureDateTime"
  >
  </datetime>

  <datetime 
    name="arrivalDateTime"        
    v-validate="`after:${input.departureDateTime}|date_format:yyyy-MM-dd HH:mm:ss|required`"
    v-model="input.arrivalDateTime"
  >
  </datetime>
<tr>

demo

使用 v-validate 字段绑定验证动态字段

Validate dynamic fields using v-validate field binding

vue.js

vue-component

vuejs2