Vue.js Array Input as Multiline Textarea

May 3, 2021
<template>
  <b-form ref="form" @submit.prevent="submit">

    <b-form-group
      label="Name"
      label-for="input-name"
    >
      <b-form-input
        id="input-name"
        v-model="item.name"
      ></b-form-input>
    </b-form-group>

    <b-form-group
      label="Alt Names"
      label-for="input-alt-names"
    >
      <b-form-input
        id="input-alt-names"
        v-model="altNamesText"
      ></b-form-input>
    </b-form-group>

  </b-form>
</template>

<script>
export default {
  props: ['item'],
  computed: {
    altNamesText: {
      get() {
        return this.item.alt_names?.join('\n')
      },
      set(newValue) {
        this.item.alt_names = newValue.split('\n').map(e => e.trim()).filter(e => e != null && e !== '')   
      }
    }
  },
  methods: {
    submit() {
      console.log(this.item.alt_names)
    }
  }
}
</script>
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.