teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問ラジオボタンが変更されたら動的に値を変更したい

編集履歴

質問編集履歴

4

少し進んだので、進んだところまで修正

2019/03/21 04:36

投稿

tampopopofu
tampopopofu

スコア22

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  compAはラジオボタンで、compBはセレクトボックスです。
16
16
 
17
- compAで選択したラジオボタンに紐づくキーを取得して、compBに表示したいのです。
17
+ compAで選択したラジオボタンに紐づくキーを元に、compBのセレクトボックスを更新したいのです。
18
18
 
19
19
 
20
20
 
@@ -34,11 +34,17 @@
34
34
 
35
35
  ## 質問
36
36
 
37
- キーがstoreに登録されたのを検知して、compBの処理を実行する方法があれば知りたいです。
37
+ compAでキーがstoreに登録され、それをcompBが取得してaxios経由でcodeListを取得するところまでは動きました。
38
-
39
-
40
-
38
+
39
+
40
+
41
- もし、そのようなことが出来なければ、これを実現する方法があればご教授くださいますとありがたいです。
41
+ 取得したcodeListをcomputedからreturnすればセレクトボックスのoptionが再描画されると思っています。
42
+
43
+
44
+
45
+ これが間違っているのでしょうか。
46
+
47
+ optionではなく、{{ codeList }}　としても何も表示されません。
42
48
 
43
49
 
44
50
 
@@ -176,23 +182,23 @@
176
182
 
177
183
  export default {
178
184
 
179
- data () {
185
+ computed: {
186
+
180
-
187
+ async codeList() {
188
+
189
+ let ret = [];
190
+
191
+ await axios.get('api/code?c=' + storeに登録したキー)
192
+
193
+ .then(function(res) {
194
+
195
+ // apiからの取得結果 codeAll = [{value:'aa1'},{value:'aa2'}]
196
+
197
+ ret = res.data.codeAll;
198
+
199
+ } }
200
+
181
- return {
201
+ return ret;
182
-
183
- codeList: [],
184
-
185
- }
186
-
187
- },
188
-
189
- props: {
190
-
191
- },
192
-
193
- created () {
194
-
195
- this.codeList = [{value : 'a123'}, {value : 'a456'}];
196
202
 
197
203
  },
198
204
 
@@ -204,18 +210,4 @@
204
210
 
205
211
 
206
212
 
207
- 1. compAのラジオボタンを選択。
208
-
209
- 2. 選択されたキーをstoreに登録。
210
-
211
- 3. 選択されたキーに紐づく値でcompBのセレクトボックスを再作成。← これができません。
212
-
213
-
214
-
215
- compBのcomputedとかでcodeListの値を書き換えればできるという認識ですが、なかなかうまくいかない現状です。
216
-
217
-
218
-
219
-
220
-
221
213
  どうかよろしくお願いいたします。

3

タイトルの修正

2019/03/21 04:36

投稿

tampopopofu
tampopopofu

スコア22

test CHANGED
@@ -1 +1 @@
1
- セレクトボックスが変更されたら動的に値を変更したい
1
+ ラジオボタンが変更されたら動的に値を変更したい
test CHANGED
File without changes

2

初心者マークを付けました

2019/03/17 05:17

投稿

tampopopofu
tampopopofu

スコア22

test CHANGED
File without changes
test CHANGED
File without changes

1

ざっくり過ぎたのでもう少し詳しくしました。

2019/03/17 04:48

投稿

tampopopofu
tampopopofu

スコア22

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- **＜概要＞**
1
+ ## 概要
2
2
 
3
3
  vue.jsとvuexを使って開発をしております。
4
4
 
@@ -6,21 +6,21 @@
6
6
 
7
7
 
8
8
 
9
- よくある「セレクトボックスの値を元に動的に内容を変更したい」というのができないでいます。
9
+ よくある「ラジオボタンの選択を元に動的に内容を変更したい」というのができないでいます。
10
10
 
11
11
 
12
12
 
13
13
  例えば、compAとcompBがあります。
14
14
 
15
- compAはセレクトボックスで、compBはテキストです。
15
+ compAはラジオボタンで、compBはセレクトボックスです。
16
-
16
+
17
- compAで選択したキーに紐づく値を取得して、compBに表示したいのです。
17
+ compAで選択したラジオボタンに紐づくキーを取得して、compBに表示したいのです。
18
18
 
19
19
 
20
20
 
21
21
  実現したいのは、
22
22
 
23
- - compA内でセレクトボックスを選択　→　選択したキーをstoreに登録。
23
+ - compA内でラジオボタンを選択　→　選択したキーをstoreに登録。
24
24
 
25
25
  - compB内でstoreに登録したキーで出力値を生成して画面表示。
26
26
 
@@ -28,40 +28,194 @@
28
28
 
29
29
  です。
30
30
 
31
- compAでセレクトボックスを変更した（storeに登録された）タイミングでcompBを再作成したいのです。
31
+ compAでラジオボタンをチェックした（storeに登録された）タイミングでcompBを再作成したいのです。
32
-
33
-
34
-
32
+
33
+
34
+
35
- **＜質問＞**
35
+ ## 質問
36
-
36
+
37
- 質問としましては、キーがstoreに登録されたのを検知して、compBの処理を実行する方法です。
37
+ キーがstoreに登録されたのを検知して、compBの処理を実行する方法があれば知りたいです。
38
-
39
-
40
-
38
+
39
+
40
+
41
- もし、そのようなことが出来なければ、これを実現する方法があればご教授ください。
41
+ もし、そのようなことが出来なければ、これを実現する方法があればご教授くださいますとありがたいです。
42
+
43
+
44
+
42
-
45
+ ## ソース
46
+
47
+
48
+
43
-
49
+ ```js
50
+
44
-
51
+ // store/main.js
52
+
45
-
53
+ const state = {
54
+
46
-
55
+ code: null
56
+
57
+ };
58
+
59
+
60
+
47
- compAとcompBの関係は以下の通りです。
61
+ const mutations = {
62
+
63
+ SET_CODE(state, _code) {
64
+
65
+ state.code= _code;
66
+
67
+ },
68
+
69
+ };
70
+
71
+
72
+
73
+ const actions = {
74
+
75
+ async setCode(context, _code) {
76
+
77
+ context.commit('SET_CODE', _code);
78
+
79
+ },
80
+
81
+ };
82
+
83
+
84
+
85
+ const getters = {
86
+
87
+ code(state) {
88
+
89
+ return state.code;
90
+
91
+ }
92
+
93
+ };
94
+
95
+
96
+
97
+ export default {
98
+
99
+ namespaced: true,
100
+
101
+ state,
102
+
103
+ mutations,
104
+
105
+ actions,
106
+
107
+ getters,
108
+
109
+ }
110
+
111
+ ```
112
+
113
+
48
114
 
49
115
  ```vue
50
116
 
117
+ // compA
118
+
51
119
  <template>
52
120
 
53
121
  <div>
54
122
 
55
- <compA></compA>
123
+ <input type="radio" name="rdo" value="a1" @click="in_fnc('a1')">AAA
56
-
124
+
57
- <compB></compB>
125
+ <input type="radio" name="rdo" value="b1" @click="in_fnc('b1')">BBB
58
126
 
59
127
  </div>
60
128
 
61
129
  </template>
62
130
 
131
+ <script>
132
+
133
+ export default {
134
+
135
+ methods: {
136
+
137
+ async in_fnc(id) {
138
+
139
+ await this.$store.dispatch('main/setCode', id);
140
+
141
+ },
142
+
143
+ },
144
+
145
+ }
146
+
147
+ </script>
148
+
63
149
  ```
64
150
 
65
151
 
66
152
 
153
+ ```vue
154
+
155
+ // compB
156
+
157
+ <template>
158
+
159
+ <div>
160
+
161
+ <select id="sel_cd">
162
+
163
+ <option v-for="(code, idx) in codeList" :value="code.value">
164
+
165
+ {{ code.value }}
166
+
167
+ </option>
168
+
169
+ </select>
170
+
171
+ </div>
172
+
173
+ </template>
174
+
175
+ <script>
176
+
177
+ export default {
178
+
179
+ data () {
180
+
181
+ return {
182
+
183
+ codeList: [],
184
+
185
+ }
186
+
187
+ },
188
+
189
+ props: {
190
+
191
+ },
192
+
193
+ created () {
194
+
195
+ this.codeList = [{value : 'a123'}, {value : 'a456'}];
196
+
197
+ },
198
+
199
+ }
200
+
201
+ </script>
202
+
203
+ ```
204
+
205
+
206
+
207
+ 1. compAのラジオボタンを選択。
208
+
209
+ 2. 選択されたキーをstoreに登録。
210
+
211
+ 3. 選択されたキーに紐づく値でcompBのセレクトボックスを再作成。← これができません。
212
+
213
+
214
+
215
+ compBのcomputedとかでcodeListの値を書き換えればできるという認識ですが、なかなかうまくいかない現状です。
216
+
217
+
218
+
219
+
220
+
67
221
  どうかよろしくお願いいたします。