i have a variable items(array of objects) with 3 attributes for every item (value, other and otherKey), for every item, the value field is required, the other field is required only if value field value is equal to otherKey field.
Look the example on jsfiddle
// 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
}
}
}
})
