Vuexに定義した連想配列データを用いて、ドロップダウンを作成したい
Vuex内で以下のような連想配列を用意してGetterで取り出すようにしています。
(最終的に更新するため、idなども必要です。)
vuex
1state: { 2 tests: [ { id: 2, name: 'name1' }, { id: 3, name: 'name2' }, { id: 4, name: 'name3' } ] 3}, 4getters: { 5 getTests (state) { 6 return state.tests 7 } 8}
vueファイル内でHTMLを以下のように記載し、ドロップダウンを作りたいのですがうまくいきません。
更新などで利用するため、idで指定して操作したので、v-forはKeyで回すのではなく、現在のようにidベースで動かしたいです。
html
1<b-dropdown-item v-for="gtest of getTests" v-bind:key="gtest.id" :currentId=gtest.id @click="alerttest(gact.id)">{{testName}}</b-dropdown-item>
Script
1data () { 2 return { 3 currentId: 0 4 } 5}, 6computed: { 7 ...mapGetters([ 'getTests' ]), 8 testName: function () { 9 for (var key in this.getActions) { 10 if (this.getActions[key].id === this.currentId) { 11 return this.getActions[key].act 12 } 13 } 14 } 15}
currentIdを定義したり、いろいろやってみましたがうまく行かないのでご教授をお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。