BootstrapVue Form Array/Collection Input with Vuelidate

Vuelidate v0.75 collections validation seems to work fine if the array or collection is objects. If the collection/array is native types (e.g. String), the changes/reactivity is not detected (not trigerring valiation rules, but the underlying value did indeed changed).

<template>  <div>    <b-form ref="form" @submit.prevent="submit">      <b-form-group        label="Name"        label-for="input-name"        invalid-feedback="Name is required"      >        <b-form-input          :state="validateState($v.item.name)"          id="input-name"          v-model="$v.item.name.$model"        ></b-form-input>      </b-form-group>      <!-- <div v-for="(v, index) in $v.friends.$each.$iter"> -->      <b-row v-for="item, index in friends" :key="index">        <b-col md="6">          <b-form-input            :state="validateState($v.friends.$each[index].name)"            v-model="$v.friends.$each[index].name.$model">          </b-form-input>        </b-col>        <b-col md="6">          <b-form-input            :state="validateState($v.friends.$each[index].age)"            v-model="$v.friends.$each[index].age.$model">          </b-form-input>        </b-col>      </b-row>      <b-button type="submit" variant="primary">Submit</b-button>    </b-form>  </div></template><script>import { validationMixin } from "vuelidate"import { required, minLength } from "vuelidate/lib/validators"export default {  mixins: [validationMixin],  // props: ['item'],  data() {    item: {      name: 'Desmond',      friends: [        { name: 'Elon', age: 48 },        { name: 'Jack', age: 43 },        { name: 'Mei Ru', age: 40 }      ]    },  },  validations: {    item: {      name: {        required      },      friends: {        $each: {            name: { required },            age: { required }        }      },    }  },  methods: {    validateState(item) {      const { $dirty, $error } = item      return $dirty ? !$error : null    },    submit() {      this.$v.item.$touch()      if (this.$v.item.$anyError)        return false      console.log(this.item)      alert("Form submitted!")    }  }}</script>

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.