I have a websites property which is an array, which I wanted to format as newline in textarea, and convert textarea back to array when stored as websites property.
The solution is to use Computed Setter.
<template>
<form>
<input name="name" v-model="item.name">
<textarea name="websites" v-model="websites"></textarea>
</form>
</template>
<script>
export default {
data() {
return {
item: {
name: 'Test',
websites: ['https://code.luasoftware.com/', 'https://www.google.com']
}
}
},
computed: {
websites: {
get() {
return this.item.websites.join('\n')
},
set(value) {
this.item.websites = value.split('\n')
}
}
},
}
</script>