vueで元の要素をコピーしてリスト表示させたい

前提・実現したいこと

もともとある要素をコピーして追加、削除したいです
削除はコピーする要素内にあるbuttonを押すことで行いたいです

エラーメッセージ

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'push' of undefined"

該当のソースコード

html
1<div id="app">
2  <div class="group">
3   <table>
4     <thead></thead>
5     <tbody></tbody>
6   </table>
7  <button　@click="del">このテーブルを削除する</button>
8  </div>
9
10  <div v-for=(section,index) in sectionList :key="(index)">
11    //上のclass="group"の内容をそのままコピーして増やしたいです
12  </div>
13
14　<button @click="add">テーブルを追加する</button>//ここを押すことでテーブルを増やしたいです
15</div>
16

js
1new Vue({
2  el: '#app',
3
4  data: function() {
5    return {
6      sectionList: []
7    }
8  },
9
10  methods: {
11
12    add: function()　{ //追加用
13      this.sectionList.push({
14        //この部分がわかりません。
15　　　　　//上記エラーがでて動きません
16      })
17    },
18
19    del: function(index)　{ // 削除用
20      this.sectionList.splice(index, 1)
21    }
22
23  },
24})

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

初心者です。何か足らないところありましたら教えてやってください。

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

回答1件

ベストアンサー

//上のclass="group"の内容をそのままコピーして増やしたいです
とのことだったので、テーブルのコピーボタンを追加してみました。
そうなると、何かしらの入力を求めるようなフォームになるのかな？
という想像から、テーブル内部をインプットにして、配列内容とバインドさせてみたんですが、
こんなもんで、あっていますか？

html
1<div id="app">
2  <div class="group" v-for="(section, index) in sectionList" :key="index">
3    <table>
4      <thead>
5         <tr>
6           <th>AAA</th>
7           <th>BBB</th>
8        </tr>
9      </thead>
10      <tbody>
11         <tr v-for="(tr, index) in section" :key="index">
12           <td><input type="text" v-model="tr.AAA"></td>
13           <td><input type="text" v-model="tr.BBB"></td>
14         </tr>
15      </tbody>
16    </table>
17    <button @click="del(index)">このテーブルを削除する</button>
18    <button @click="copy(index)">このテーブルをコピーする</button>
19  </div>
20
21　<button @click="add">テーブルを追加する</button><!--ここを押すことでテーブルを増やしたいです-->
22</div>

javascript
1new Vue({
2  el: '#app',
3  data: function() {
4    return {
5      sectionList: []
6    }
7  },
8  methods: {
9    add: function()　{ //追加用
10      this.sectionList.push([{AAA:"111", BBB:'222'}]);
11    },
12    copy: function(index) { //コピー用
13      let cloned = JSON.stringify(this.sectionList[index]);
14      this.sectionList.push(JSON.parse(cloned));
15    },
16    del: function(index)　{ // 削除用
17      this.sectionList.splice(index, 1)
18    }
19  },
20})