vueを使用して、Vueディレクティブがあるhtml要素を複製、削除したい

色々勉強中の初心者です
よろしくお願いします。

発生している問題・エラーメッセージ

以前vueを使用してbuttonを押すことで自分自身と親を削除するようにしたいでお世話になったことを
応用させたかったのですがうまくいきません。

該当のソースコード

html
1<div id="app">
2　　//初めは以下のdiv要素は見えないようにしています
3 <div class="table dispNone">
4   <button id="button" @click="deleteDom">削除</button>
5 </div>
6
7<button @click="addDom">増やす</button>
8</div>
9
10を増やすボタンを押して
11
12<div id="app">
13 <div class="table dispNone">
14   <button id="button" @click="deleteDom">削除</button>
15 </div>
16
17 <div class="table">
18   <button id="button" @click="deleteDom">削除</button>
19 </div>
20 <div class="table">
21   <button id="button" @click="deleteDom">削除</button>
22 </div>
23 <div class="table">
24   <button id="button" @click="deleteDom">削除</button>
25 </div>
26
27　<button @click="addDom">増やす</button>
28</div>
29
30とclass="dispNone"を外して複製したり、削除ボタン（@click="deleteDom）を押して
31
32<div id="app">
33　<div class="table dispNone">
34   　<button id="button" @click="deleteDom">削除</button>
35 　</div>
36
37　<button @click="addDom">増やす</button>
38</div>
39
40のように削除したりしたい
41

css
1.dispNone{
2  display:none;
3}

試したこと

js
1window.Vue = require('vue');
2
3const app = new Vue({
4    el: '#app',
5    data: {},
6    methods: {
7　　　　addDom:function(){
8          //ここにクラスを外して、増やすボタン用のメソッドを描きたいのですがよくわかりません。
9        }
10      deleteDom: function (e) {//削除用です。こちら以前の質問で参考にさせてもらったものを流用しています。
11            var del = e.target.parentNode;
12            del.parentNode.removeChild(del);
13        }
14    }

補足情報（FW/ツールのバージョンなど）

初心者です。足らない知識、情報ありましたら指摘してやってください。
よろしくお願いします。

yambejp

2019/11/21 03:30

そのままコピーして使うとidがかぶってNGですがどうしますか？

kentooooo

2019/11/21 03:45

idは無しでも大丈夫です。情報が乱雑で申し訳ありません。

kentooooo

2019/11/21 07:06

ご回答ありがとうございます。 fiddle上ですと動くのですが、自分の環境ですと、addはできるのですが、deleteができません。何か理由として考えられることがあれば教えてください。

kentooooo

2019/11/21 08:44

vueディレクティブは複製すると効かなくなるってことがあるのでしょうか？

kentooooo

2019/11/21 09:01

コンソール上にエラーが何も出てないあたりコードの問題ではなさそうなんですが…。

行動規範の内容に同意します

回答2件

yambejpさんの回答があるので別回答としてvueらしい方法もお伝えしておきます。

html
1<div id="app">
2  <div v-for="(item, index) in items" :key="index">
3    <p>
4      {{ item.name }}
5    </p>
6    <button @click="remove(index)">削除</button>
7  </div>
8  <button @click="add()">追加</button>
9</div>

js
1const DATA_TEMPLATE = {
2  name: 'sample',
3  value: 1
4}
5
6new Vue({
7  el: '#app',
8  data() {
9    return {
10      items: []
11    }
12  },
13  methods: {
14    add() {
15      this.items.push(DATA_TEMPLATE)
16    },
17    remove(index) {
18      this.items.splice(index, 1)
19    }
20  }
21})

vueなどのフレームワークは双方向バインディングが特徴的でdataと同期してHTMLの描画を制御するのに向いているのでDOMを直接操作してこの動作を作成したいのであれば素のJavaScriptだけのほうがスマートかなと思います。

投稿2019/11/21 04:34

nt4c

総合スコア768

ベストアンサー

申し訳ないです！vueらしさのかけらもなくほぼdom処理
addはなんとでもなりますが、delは追加されたものに継承させるのがめんどうなので
親要素から引き継ぐようにしています

javascript
1<style>
2.dispNone{display:none}
3</style>
4<div id="app" @click="deleteDom">
5  <div class="table dispNone">
6    <button class="del">削除</button>
7  </div>
8  <button @click="addDom">増やす</button>
9</div>
10<script>
11const app = new Vue({
12  el: '#app', 
13  methods: {
14    addDom:function(e){
15      var parent=e.target.parentNode
16      var newTable=parent.querySelector('.table').cloneNode(true);
17      newTable.classList.remove('dispNone');
18      parent.insertBefore(newTable,e.target);
19    },
20    deleteDom: function (e) {
21      var target = e.target;
22      if(target.classList.contains('del')){
23        var del = target.parentNode;
24        del.parentNode.removeChild(del);
25      }
26    },
27  }
28});
29</script>