When attempting to display the values of a computed property in the template using the syntax {{todo[0]['title']}}, I am receiving an 'undefined' output. However, using {{todo[0]]}} allows me to render the entire object. My goal is to be able to render a todo using its property specifically. Any help or guidance on this matter would be greatly 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bdcbc8d8c5fd89938d938d">[email protected]</a>/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>