BootstrapVue Form Array to Textarea With vuelidate

The basic setup is as per BootstrapVue Form With Validation (vuelidate).

We shall have a field friends which is an array of friend names, which shall be displayed in a textarea separated by lines, and save back to friends as array.

  • v-model using itemFriends to handle transformation between lines of string and array
  • validation using friends, so you can do more advance things like count number of friends
<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>      <b-form-group        label="Friends"        label-for="input-friends"        invalid-feedback="Friends are required"      >        <b-form-textarea          :state="validateState($v.item.friends)"          id="input-friends"          v-model="$v.itemFriends.$model"        ></b-form-textarea>      </b-form-group>      <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: ['Elon', 'Jack', 'Mei Ru']    },  },  validations: {    item: {      name: {        required      },      friends: {        required      },    },    itemFriends: {      // required    }  },  methods: {    friends: {      get() {        return this.item.friends.join('\n')      },      set(value) {        if (value)          this.item.friends = value.split('\n')        else          this.item.friends = []      }    },    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.