質問: new Vue({ el: '#app', data: { maxNum: 20, title_disabled: false, job_type_control: "0", sum: 0, contentGroup: [ {name: '店名', form: 'shop_name', start: "2"}, {name: '勤務地', form: 'location', start: "3"}, {name: '電話番号', form: 'telno', start: "1"}, {name: 'その他', form: 'etc', start: "4"}, ] }, computed: { rowsSum: function () { }, }, components: { 'textarea-component': textareaComponent } }) ; ``` コンポーネント化する前は、個々に要素を書いて、データバインディングの設定をし、 Vue インスタンスの中の data に設定した値を computed で合算することができました。 やっている途中で、テキストエリアの部分が共通化できると考え、コンポーネント化してみたものの、 今度はデータの取り出し方が分からなくなりました...。 いったんは、jQuery で合算し、最大値を超えていたら力技で number型とテキストエリアの数値を変更したのですが、 連打すると変わってしまったり、うまくいきません...。 やろうとしていることは、コンポーネントでは無理なのでしょうか? コンポーネントの役どころというものも思い違いをしているかも知れませんので、ご教示頂けますでしょうか。 よろしくお願い致します。
回答: Vueのバインディングは基本的に単方向です。 * 単方向のデータフロー 親コンポーネントと通信する方法がいくつかあります。 * イベントと値を送出する * コンポーネントで v-model を使う * .sync 修飾子 `.sync` 修飾子を使って実装するとしたらこんな感じでしょうか。 https://codesandbox.io/s/1v1y54qpm7