使用vuelidate进行动态馆藏验证

Question

我有一个变量项（对象数组），每个项（值，other和otherKey）具有3个属性，对于每个项，值字段都是必填字段，仅当值字段值等于otherKey字段。

在jsfiddle上查看示例

  

https://jsfiddle.net/dyquv3ek/5/

// Template
<div id="app">
   <div v-for="(item, i) in items" :key="i">
       <input type="text" v-model="item.value" 
          @input="$v.items.$each[i].$touch" 
         :class="{error: $v.items.$each[i].value.$error}">
       <input type="text" v-model="item.other" 
          @input="$v.items.$each[i].$touch" 
          :class="{error: $v.items.$each[i].other.$error}">
   </div>
   <pre>{{ $v }}</pre>
</div>

// Js
Vue.use(window.vuelidate.default)

const { required } = window.validators

new Vue({
    el: "#app",
  data: {
    items: [{
        value: 'A',
      other: 'B',
      otherKey: 'C'
    }, {
        value: 'D',
      other: 'E' ,
      otherKey: 'F'   
    }, {
        value: 'G',
      other: 'H'  ,
      otherKey: 'I'  
    }]
  },
  validations: {
    items: {
        $each: {
        value: { required },
        other: {} // { required } only if value === otherKey
      }
    }
  }
})