Vuex NextJSでページを開いたときにAPI(Rails)を叩き、JSONでリストを取得し、表示させる処理をしています。
取得したデータをStoreに保存し、GetterでObjectを取ってくるとこまでは問題ないのですが、Objectの展開がうまくできません。
mounted
でのObjectの中身をデバッグすると、以下の通りになっています。
▼ Object ▼ todos: Array(2) ▶︎ 0: {id: 1, title: "todoタイトル1"} ▶︎ 1: {id: 2, title: "todoタイトル2"} length: 2 ▶︎ __proto__: Array(0) ▶︎ __ob__: Observer {value: {...}, dep: Dep, vmCount: 0} ▶︎ __proto__: Object
ここからconsole.dir(this.getStoreTodos.todos)
と指定することで、0と1が取り出せると思ったのですが、undefined
となってしまいます。
v-for
も展開できていない状況です。
基本的なところで恐縮ですが、どのようにすれば、取り出せるでしょうか?
ご教授いただければと思います。
#ソースコード
pages/index.vue
js
1<template> 2 <div class="todolist" v-for="(todo, index) in getStoreTodos.todos" :key="todos"> 3 <div class="todo">{{ todo.title }}</div> 4 </div> 5</template> 6 7<script> 8 import { mapActions, mapGetters } from "vuex" 9 10 export default { 11 computed: { 12 ...mapGetters({ 13 getStoreTodos: 'todo/getStoreTodos' 14 }) 15 }, 16 mounted () { 17 this.getApiTodos() 18 19 console.dir(this.getStoreTodos) // Objectと返ってくる 20 console.dir(this.getStoreTodos.todos) // undefined 21 }, 22 methods: { 23 ...mapActions({ 24 getApiTodos: 'todo/getApiTodos' 25 }) 26 } 27 } 28</script>
store/todo.js
js
1import axios from 'axios' 2 3const store = () => { 4 return { 5 todos: {} 6 } 7} 8 9export const getters = { 10 getStoreTodos (state) { 11 return state 12 } 13} 14 15export const actions = { 16 async getApiTodos ({ commit }) { 17 let getTodos = await axios.get('http://0.0.0.0:3100/todo/index') 18 commit('setTodos', getTodos.data) 19 } 20} 21 22export const mutations = { 23 setTodos (state, payload) { 24 state.todos = payload 25 } 26}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/16 10:15