質問: ### 【Vue】 関数で生成したhtml内のv-on:clickが機能しない Vue.js初心者です。 以下のコードは、新規追加ボタンでテキストエリアと削除ボタンを生成するプログラムなのですが、をクリックしてaddメソッドを実行したときに生成されるhtmlの、削除ボタンのv-on:click='del'が機能しません。(削除ボタンを押しても何の反応もありません。) デベロッパツールで見ても、とそのまま出力されてしまっています。 調べても原因がわからず困っています。 created:の中でも this.add()を実行しているのですが、この場合は、生成されたhtmlのv-on:delが正常に機能しています。(削除ボタンで、その親のsectionが削除されます。)同じメソッドを実行しているはずなのに、何が違うのでしょうか? 宜しくお願い致します。 ### 該当のソースコード ``` 新しいメモ ```
回答: この方法ではVueテンプレートのコンパイル処理が入らないので`v-on:click`は動きません。 また、Vueを使うにあたって`appendChild`などでDOMを直接変更するのは初心者が良くやるアンチパターンです。 Vueを使うメリットが完全になくなります。 では実際どうすれば良いかというと、sectionを配列で管理し、テンプレート側で`v-for`を使って配列の内容をもとにユーザーインターフェイスを表示してやれば良いのです。 このようにすればテキストエリアに入力された値は配列に格納されているので、「入力された内容をファイルに保存する処理を新たに加えたい」とかなった場合に、テキストエリアの値をDOM操作で取得する必要がなくなります。 データを管理する部分と表示する部分で上手く分離される形になって、色々と簡潔に書けるようになるわけです。 ``` 削除 新しいメモ ``` ``` new Vue({ el: '#app', data: function() { return { sectionList: [] } }, methods: { add: function() { // メモ追加 this.sectionList.push({ value: '' }) }, del: function(index) { // メモ削除 this.sectionList.splice(index, 1) } }, created: function(){ // インスタンス生成時 this.add() // 早速メモを1つ作成 } }) ```