vue.js - 使用 vuelidate 进行动态集合验证

Question

我有一个变量项目（对象数组），每个项目（值、其他和 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
      }
    }
  }
})