vue.js、vuexを用いてTodoアプリのようなものを制作しています。
stateのlistsという配列にmutationで変更を加えたのち、gettersで更新後のlistsを<ul>タグで表示しようと思っています。その際のgettersの扱い方があまりわかりませんでした。
構成 store --index.js --mutation.js --getters.js components --homePage.vue
js
1mutation.js 2 3 4export const state = { 5 count:0, 6 lists:[ 7 {title:'aaa', 8 date:'2018/1/10', 9 start:'8時', 10 finish:'17時', 11 }, 12 {title:'bbb', 13 date:'2018/1/15', 14 start:'9時', 15 finish:'16時', 16 }, 17 ] 18};
js
1getters.js 2 3 4export const getters={ 5 getLists(state){ 6 return state.lists 7 } 8}
html
1<ul> 2 <li v-for="item in displayedlists"> 3 {{ item.title }}<br> 4 {{item.date}}<br> 5 {{item.start}}<br> 6 {{item.finish}} 7 </li> 8</ul>
js
1import Vue from 'vue' 2import { mapState ,mapGetters} from 'vuex' 3 4export default { 5 computed:{ 6 ...mapState(['lists']), 7 ...mapGetters(['getLists']), 8 displayedlists(){ 9 return this.getLists 10 }, 11 }
listsに変更を加えるmethodsはとりあえず置いておいて、listsをそのまま取得するgettersを使って<ul>表示したいのですが、unknown getter: getListsとエラーになります。
よろしければ、gettersの使い方を詳しく教えていただけると幸いです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/05 22:14