CODEWITHSUNDEEP
vue.jsvuexvue-routervuejs3vue-router4
Adlet
Adlet

Reputation: 5

[Vue warn]: Invalid prop: type check failed for prop "productCartData". Expected Object, got String with value "[object Object]"

"cardData" sees but does not understand what elements the array consists of.

Everything works in vue-router v3.x.

My error:

[Vue warn]: Invalid prop: type check failed for prop "productCartData". Expected Object, got String with value "[object Object]". 
      at <ProductCart key=undefined productCartData="[object Object]" > 
      at <Cart cartData= ["[object Object]"]0: "[object Object]"length: 1__proto__: Array(0) onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
      at <RouterView> 
  at <App>


<router-link class="nav-link" :to="{ name: 'cart', params: { cartData: cart } }">

Cart.vue

<ProductCart
  v-for="product in cartData"
  :key="product.id"
  :productCartData="product"
/>

props: {
    cartData: {
      type: Array,
      default() {
        return [];
      },
    },
  },

ProductCard.vue

props: {
    productCartData: {
      type: Object,
      default() {
        return {};
      },
    },
  },

Getter

 cart(state) {
            return state.cart;
          },

store.js

const store = createStore({
      state: {
        products: [],
        cart: [],
      },
    },

Upvotes: 0

Views: 9120

Answers (1)

Toufiq Ahmed
Toufiq Ahmed

Reputation: 199

You cant pass getter cart of array as params in router link. if you want access getter of cart into your component just access it directly in that component.

or you don't event need getter. just create a computed property in your component.

params can only be string or number and they need to be declared in router

read for params. https://next.router.vuejs.org/guide/essentials/dynamic-matching.html

to access objects arrays from store or data of components just use computed property.

Upvotes: 3

Related Questions