Vuex jumping into undefined ID error


I am trying to make a cart with use of Vuex. But everytime i get to my page, it just says:

So basicly, i am looping through the items stored in VueX, but it keeps saying that error. I am using a $store.getter.cart to get the cart items.

  <div class="navbar-item has-dropdown is-hoverable">
    <a class="navbar-link">
    <div class="navbar-dropdown">
      <a v-for="" :key="" class="navbar-item">
        <figure class="image">
          <img class="is-rounded" :src="items.img" />
          <p class="is-small">{{ }}</p>
          <p class="is-small">{{ items.price }}</p>
          <p class="is-small">{{ items.amount }}</p>


export default {
  data() {
    return {}

  computed: {
    cart() {
      return this.$store.getters.cart

This is my Cart.vue
And my store state is this:

  cart: [{}]

This is my Getter

cart(state) {
    return state.cart

The rest has been implemented correctly (The mutation, getters and actions)
I dont get why its erroring, even after adding a v-if=“cart.length > 0” it keeps going into that error :frowning:
Thanks for any help!

Try $store.getters.cart and cart:[]. With the empty object in the initial state, v-if=“cart.length > 0” will always be true.


Hey, after a while, this was exactly the issue haha. I managed to fix it, so thanks!!!

1 Like