Access to Object property using computed method in vue 3 veux shows undefined

Question

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/[email protected]/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>

Answer 1

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/[email protected]/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>