質問編集履歴

2

タイトル変更

2021/12/13 07:53

投稿

anzi1230
anzi1230

スコア19

test CHANGED
@@ -1 +1 @@
1
- イベントハンドラに複数を引数を渡してvuexに保存したい。
1
+ イベントハンドラにidを引数してvuexに保存したい。
test CHANGED
@@ -1,40 +1,18 @@
1
- selectboxで選択した値idをvuexに保持させたいです。
1
+ selectboxで選択した値に紐づくidをvuexに保存したいです。
2
2
 
3
- @changeイベントで引数をしましたがundifindeになってしまいます。
3
+ 現在イベントで引数を指定しましたがundifindeになってしまいます。
4
4
 
5
- どなたかご教ただければ幸いです。
5
+ こが間違っているのかどなたかご存じでしたらご示お願致します。
6
6
 
7
7
 
8
-
9
-
10
-
11
- ```
12
-
13
- -Item.vue-
14
-
15
-
16
-
17
- let items = [
18
-
19
- {
20
-
21
- "id": "1",
22
-
23
- "urlname": "googl"
24
-
25
- }]
26
-
27
- this.$store.commit('setItems', items)
28
-
29
- ```
30
8
 
31
9
  ```javascript
32
10
 
33
11
  export const state = () => ({
34
12
 
35
- items: [],
13
+ items: [{"id": "1", "urlname": "google"}],
36
14
 
37
- selectedItems: []
15
+ selectedUrlId: []
38
16
 
39
17
  })
40
18
 
@@ -50,7 +28,7 @@
50
28
 
51
29
  setSelectedItem (state, payload) {
52
30
 
53
- state.selectedItems = payload
31
+ state.selectedUrlId = payload
54
32
 
55
33
  }
56
34
 
@@ -66,7 +44,7 @@
66
44
 
67
45
  <div>
68
46
 
69
- <select @change="updateSelect(items.id,$event)">
47
+ <select @change="updateSelect(item.id)">
70
48
 
71
49
  <option v-for="(item, index) in items" :key="index" >{{ item.urlname}}</option>
72
50
 
@@ -100,11 +78,11 @@
100
78
 
101
79
  methods: {
102
80
 
103
- updateSelect (id, event) {
81
+ updateSelect (id) {
104
82
 
105
- console.log('id,event', id, event) //id,event ←undifinedになります。
83
+ console.log('id,event', id) //id ←undifinedになります。
106
84
 
107
- this.$store.commit('setSelectedItem', event.target.value)
85
+ this.$store.commit('setSelectedItem', id)
108
86
 
109
87
  }
110
88
 

1

タイトル名変更

2021/12/13 07:53

投稿

anzi1230
anzi1230

スコア19

test CHANGED
@@ -1 +1 @@
1
- selectboxで選択た値をvuexに保持させたい
1
+ イベントハンドラに複数を引数を渡vuexに保存したい
test CHANGED
@@ -1,8 +1,8 @@
1
- 現在vuexに値をsetし表示る所までできました
1
+ selectboxで選択した値とidをvuexに保持させたいで
2
2
 
3
- selectbox選択した値と紐づいているidをvuex保持させたす。
3
+ @changeイベント引数を渡ましがundifindeになってします。
4
4
 
5
- 保持させたい値はitemsのurlnameとidになります。
5
+ どなかご教授ただければ幸いです。
6
6
 
7
7
 
8
8
 
@@ -32,7 +32,9 @@
32
32
 
33
33
  export const state = () => ({
34
34
 
35
- items: []
35
+ items: [],
36
+
37
+ selectedItems: []
36
38
 
37
39
  })
38
40
 
@@ -43,6 +45,12 @@
43
45
  setItems (state, payload) {
44
46
 
45
47
  state.items = payload
48
+
49
+ },
50
+
51
+ setSelectedItem (state, payload) {
52
+
53
+ state.selectedItems = payload
46
54
 
47
55
  }
48
56
 
@@ -58,7 +66,7 @@
58
66
 
59
67
  <div>
60
68
 
61
- <select>
69
+ <select @change="updateSelect(items.id,$event)">
62
70
 
63
71
  <option v-for="(item, index) in items" :key="index" >{{ item.urlname}}</option>
64
72
 
@@ -88,6 +96,20 @@
88
96
 
89
97
  }
90
98
 
99
+ },
100
+
101
+ methods: {
102
+
103
+ updateSelect (id, event) {
104
+
105
+ console.log('id,event', id, event) //id,event ←undifinedになります。
106
+
107
+ this.$store.commit('setSelectedItem', event.target.value)
108
+
109
+ }
110
+
111
+ }
112
+
91
113
  }
92
114
 
93
115
  </script>