ヘッダーのheader.vueの要素selectBoxに入った値を選択すると、
vuexのselectIdにidが入り、address.vueが読まれたタイミングで描画できる所まで確認しています。
やりたい事は、
storeのselectedUrlIdが変更される度に
address.vueのaListメソッドが動くようにしたいです。
どなたか実現方法をご存じでしたらご教示頂けると幸いです。
宜しくお願い致しますm(__)m
【address.vue】 <template> <div> <h4>アドレス</h4> <input type="text" value="" v-model="item1.originserver"> </div> </template> <script> data () { return { item1: {} } } created () { this.aList() }, methods: { async aList() { var urlId = this.$store.state.selectedUrlId var waId = '' const bList = await API.graphql(graphqlOperation(b)) waId = bList.data.items.filter(value => value.id === urlId) this.item1 = waId[0] } } </script>
javascript
1【index.js】 2export const state = () => ({ 3 selectId: '' 4}) 5 6export const mutations = ({ 7 setSelectedItem (state, payload) { 8 state.selectId= payload 9 } 10}) 11
【header.vue】 <template> <select @change="updateSelect"> <option v-for="item in items" :key="item.id" :value="item.id">{{ item.url }}</option> </select> </template> <script> export default { data () { return { } }, methods: { updateSelect (e) { this.$store.commit('setSelectedItem', e.target.value) } }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。