質問: vue.jsのv-forの扱い方について質問です。 ``` ``` 現在v-forをこのように使用し、v-htmlの中に配列(itemArray)で持っていたhtml要素を出力しています。 そこで、例えば「生成」ボタンを押したタイミングで一旦生成されたをリセットし、再度itemArrayのリストを生成する必要が生じました。(リスト内容を切り替える処理のため) このようなケースの場合、jQueryで ``` $("li").remove(); ``` としてしまうと、今度は生成ボタンを押してもが無いことになってしまい生成できません。 しかしremoveしないとがどんどん生成されてしまいます。 解決法などありますでしょうか?
回答: vuejsで管理されているHTMLの要素はjqueryで触ってはいけません。 li要素を削除するのではなく、itemArrayを空にしましょう。 ``` Add List Clear List ``` ``` var vm = new Vue({ el: '#app', data: { itemArray: ['aaa', 'bbb'] }, methods: { add: function (event) { this.itemArray.push('ccc'); }, clear: function (event) { this.itemArray = []; } } }); ``` 【参考】上記コードの動くサンプル