回答編集履歴

2

多次元配列用に修正

2019/12/02 03:08

投稿

nt4c
nt4c

スコア768

test CHANGED
@@ -12,11 +12,11 @@
12
12
 
13
13
  <div id="app">
14
14
 
15
- <draggable>
15
+ <draggable v-for="(list,taskIndex) in tasks">
16
16
 
17
- <li class="card" v-for="(item, index) in list" :key="item.status">
17
+ <li class="card" v-for="(item, listIndex) in list" :key="item.status">
18
18
 
19
- <span class="delele" v-on:click="doDelete(index)">削除</span>
19
+ <span class="delele" v-on:click="doDelete(taskIndex, listIndex)">削除</span>
20
20
 
21
21
  </li>
22
22
 
@@ -34,9 +34,9 @@
34
34
 
35
35
  methods: {
36
36
 
37
- doDelete: function(index){
37
+ doDelete: function(taskIndex, listIndex){
38
38
 
39
- this.item.splice(index, 1);
39
+ this.tasks[taskIndex].splice(listIndex, 1);
40
40
 
41
41
  }
42
42
 

1

誤送信のためコード追加

2019/12/02 03:08

投稿

nt4c
nt4c

スコア768

test CHANGED
@@ -1,7 +1,49 @@
1
1
  引数をオブジェクトではなくindexをそのまま渡してはどうですか?
2
+
3
+
2
4
 
3
5
 
4
6
 
5
7
  ```vue
6
8
 
9
+ <template>
10
+
11
+ <!-- 一部抜粋 -->
12
+
13
+ <div id="app">
14
+
15
+ <draggable>
16
+
17
+ <li class="card" v-for="(item, index) in list" :key="item.status">
18
+
19
+ <span class="delele" v-on:click="doDelete(index)">削除</span>
20
+
21
+ </li>
22
+
23
+ </draggable>
24
+
25
+ </div>
26
+
27
+ </template>
28
+
29
+
30
+
31
+ <script>
32
+
33
+ export default {
34
+
35
+ methods: {
36
+
37
+ doDelete: function(index){
38
+
39
+ this.item.splice(index, 1);
40
+
41
+ }
42
+
43
+ }
44
+
45
+ }
46
+
47
+ </script>
48
+
7
49
  ```