teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

解決法の追記

2018/10/30 02:22

投稿

funmas
funmas

スコア31

title CHANGED
File without changes
body CHANGED
@@ -34,4 +34,58 @@
34
34
  console.log("---spanEvent")
35
35
  },
36
36
  ```
37
- どなたかご教授のほど、お願いいたします。
37
+ どなたかご教授のほど、お願いいたします。
38
+
39
+ -----
40
+ **2018/10/13 11:17追記**
41
+ maisumakun様ありがとうございます。
42
+ イベントオブジェクトを渡すということで解決することができました。
43
+ 下記二点の解決法コードを記載します。
44
+
45
+ ```stopPropagation
46
+ <ul>
47
+ <ol v-for="(item, index) in myList">
48
+ <li @click="liEvent(index, $event)">
49
+ <span>
50
+ {{ item.name }}
51
+ </span>
52
+ <span id="hoge" @click="spanEvent(index)">
53
+ [x]
54
+ </span>
55
+ </li>
56
+ </ol>
57
+ </ul>
58
+
59
+
60
+ liEvent: function(index, e) {
61
+ if (e.target.id !== "hoge") {
62
+ console.log("---liEvent")
63
+ }
64
+ },
65
+ spanEvent: function(index) {
66
+ console.log("---spanEvent")
67
+ },
68
+ ```
69
+ ```target
70
+ <ul>
71
+ <ol v-for="(item, index) in myList">
72
+ <li @click="liEvent(index)">
73
+ <span>
74
+ {{ item.name }}
75
+ </span>
76
+ <span @click="spanEvent(index, $event)">
77
+ [x]
78
+ </span>
79
+ </li>
80
+ </ol>
81
+ </ul>
82
+
83
+
84
+ liEvent: function(index) {
85
+ console.log("---liEvent")
86
+ },
87
+ spanEvent: function(index, e) {
88
+ console.log("---spanEvent")
89
+ e.stopPropagation();
90
+ },
91
+ ```