【Vue.js】親コンポーネントから渡されたpropsをv-modelに使用する
すぐに思いつくのは以下のようなコードですが、これではpropsの値をそのまま書き換えようとして警告が出てしまいます。
<template> <textarea rows="10" v-model="itemBody"></textarea> </template> <script> export default { props: { itemBody: { type: String, required: false, default: null }, // ...
警告を回避するには、v-modelをプロパティへのバインドとイベント発火とにバラします。
<template> <textarea rows="10" :value="itemBody" @input="form.body=$event.target.value"></textarea> </template> <script> export default { props: { itemBody: { type: String, required: false, default: null }, data() { return { formBody: this.itemBody } }, // ...