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
itemFriendsto 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>