"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: [],
},
},
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 routerread 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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments