Vue.js – Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'product')

I’m currently working on an eCommerce app using Django and Vue.js and I am currently trying to find out why my CartItem.vue component is not working. Its suppose to display the product, product price, the number of products selected, and the total price of the number of products selected.

<template>
  <tr>
    <td>
      <router-link :to="item.product.get_absolute_url">{{ item.product.name }}</router-link>
    </td>
    <td>₱{{ item.product.price }}</td>
    <td>{{ item.quantity }}</td>
    <td>₱{{ getItemTotal(item).toFixed(2) }}</td>
    <td><button class="delete"></button></td>
  </tr>
</template>

<script>
export default {
  name: 'CartItem',
  props: {
    initialItem: Object
  },
  data() {
    return {
      item: this.initialItem
    }
  },
  methods: {
    getItemTotal(item) {
      return item.quantity * item.product.price
    },
  },
}
</script>

But whenever I execute my code I get this error:

CartItem.vue?5193:4
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'product')

I have tried and have used the .product method multiples time and this is the first time the compiler can’t read it.

If you are wondering, this is the main cart link code:

<template>
  <div class="page-cart">
    <div class="columns is-multiline">
      <div class="column is-12">
        <h1 class="title">Cart</h1>
      </div>

      <div class="column is-12 box">
        <table class="table is-fullwidth" v-if="cartTotalLength">
          <thead>
            <tr>
              <th>Product</th>
              <th>Price</th>
              <th>Quantity</th>
              <th>Total</th>
              <th></th>
            </tr>
          </thead>

          <tbody>
            <CartItem v-for="item in cart.items" v-bind:key="item.product.id" v-bind:Item="item" />
          </tbody>
        </table>

        <p v-else>You dont have any product in your cart...</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import CartItem from '@/components/CartItem.vue'

export default {
  name: 'Cart',
  components: {
    CartItem
  },
  data() {
    return {
      cart: {
        items: []
      }
    }
  },
  mounted() {
    this.cart = this.$store.state.cart
  },
  computed: {
    cartTotalLength() {
      return this.cart.items.reduce((acc, curVal) => {
        return acc += curVal.quantity
      }, 0)
    }
  }
}
</script>

>Solution :

Your CartItem prop is called initialItem but you are setting Item in the main cart link code. Updating <CartItem ... v-bind:Item="item" /> to <CartItem ... v-bind:initialItem="item" /> should fix it.

For this to be raised in a clearer manner, you should update your prop declaration to make InitialItem required:

  props: {
    initialItem: Object,
    required: true,
  },