概要
vue.jsとvuexを使って開発をしております。
あと、単一コンポーネント(.vue)も使っております。
よくある「ラジオボタンの選択を元に動的に内容を変更したい」というのができないでいます。
例えば、compAとcompBがあります。
compAはラジオボタンで、compBはセレクトボックスです。
compAで選択したラジオボタンに紐づくキーを元に、compBのセレクトボックスを更新したいのです。
実現したいのは、
- compA内でラジオボタンを選択 → 選択したキーをstoreに登録。
- compB内でstoreに登録したキーで出力値を生成して画面表示。
です。
compAでラジオボタンをチェックした(storeに登録された)タイミングでcompBを再作成したいのです。
質問
compAでキーがstoreに登録され、それをcompBが取得してaxios経由でcodeListを取得するところまでは動きました。
取得したcodeListをcomputedからreturnすればセレクトボックスのoptionが再描画されると思っています。
これが間違っているのでしょうか。
optionではなく、{{ codeList }} としても何も表示されません。
ソース
js
1// store/main.js 2const state = { 3 code: null 4}; 5 6const mutations = { 7 SET_CODE(state, _code) { 8 state.code= _code; 9 }, 10}; 11 12const actions = { 13 async setCode(context, _code) { 14 context.commit('SET_CODE', _code); 15 }, 16}; 17 18const getters = { 19 code(state) { 20 return state.code; 21 } 22}; 23 24export default { 25 namespaced: true, 26 state, 27 mutations, 28 actions, 29 getters, 30}
vue
1// compA 2<template> 3 <div> 4 <input type="radio" name="rdo" value="a1" @click="in_fnc('a1')">AAA 5 <input type="radio" name="rdo" value="b1" @click="in_fnc('b1')">BBB 6 </div> 7</template> 8<script> 9export default { 10 methods: { 11 async in_fnc(id) { 12 await this.$store.dispatch('main/setCode', id); 13 }, 14 }, 15} 16</script>
vue
1// compB 2<template> 3 <div> 4 <select id="sel_cd"> 5 <option v-for="(code, idx) in codeList" :value="code.value"> 6 {{ code.value }} 7 </option> 8 </select> 9 </div> 10</template> 11<script> 12export default { 13 computed: { 14 async codeList() { 15 let ret = []; 16 await axios.get('api/code?c=' + storeに登録したキー) 17 .then(function(res) { 18 // apiからの取得結果 codeAll = [{value:'aa1'},{value:'aa2'}] 19 ret = res.data.codeAll; 20 } } 21 return ret; 22 }, 23} 24</script>
どうかよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー