I get undefined when I try to render the values of the computed property
in the template using its property {{todo[0]['title']}} but {{todo[0]]}} renders the whole objects. I want to be able to render a todo using it property. Any assistance is well appreciated
const {
createApp,
ref,
computed,
onMounted
} = Vue;
const {
createStore
} = Vuex;
const store = createStore({
state: {
alltodos: []
},
mutations: {
setTodos(state, todo) {
(state.alltodos) = todo
}
},
getters: {
allTodoGetters(state) {
const sta = JSON.parse(JSON.stringify(state));
return sta
}
},
actions: {
async fetchTodos({
commit
}) {
const response = await axios.get('https://jsonplaceholder.typicode.com/todos');
commit('setTodos', response.data);
},
}
});
const app = createApp({
setup() {
let alltodos = computed(() => store.getters["allTodoGetters"]);
onMounted(() => {
store.dispatch('fetchTodos')
})
return {
alltodos
}
}
});
app.mount("#app")<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.30/vue.global.min.js"></script>
<script src="https://unpkg.com/vuex@4.0.0/dist/vuex.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
<div v-for="(todo, index) of alltodos" :key="index">{{todo[0]}}</div>
</div>If you want to show first item from array try like following snippet:
const {
createApp,
ref,
computed,
onMounted
} = Vue;
const {
createStore
} = Vuex;
const store = createStore({
state: {
alltodos: []
},
mutations: {
setTodos(state, todo) {
(state.alltodos) = todo
}
},
getters: {
allTodoGetters(state) {
// 👇 return just the state you want
const sta = JSON.parse(JSON.stringify(state.alltodos));
return sta
}
},
actions: {
async fetchTodos({
commit
}) {
const response = await axios.get('https://jsonplaceholder.typicode.com/todos');
commit('setTodos', response.data);
},
}
});
const app = createApp({
setup() {
let alltodos = computed(() => store.getters["allTodoGetters"]);
onMounted(() => {
store.dispatch('fetchTodos')
})
return {
alltodos
}
}
});
app.mount("#app")<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.30/vue.global.min.js"></script>
<script src="https://unpkg.com/vuex@4.0.0/dist/vuex.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
<div v-for="(todo, index) in alltodos" :key="index">
<!-- 👇 show property you want -->
<div v-for="(property, i) in todo">{{ property }}</div>
</div>
</div>