Vuex jumping into undefined ID error

Hello!

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.

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

<script>

export default {
  data() {
    return {}
  },

  computed: {
    cart() {
      return this.$store.getters.cart
    }
  }
}
</script>

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.

2 Likes

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

1 Like