[Vue 警告]：道具无效：道具"productCartData"类型检查失败。预期对象，获取值为 "[object Object]" 的字符串

Question

"cardData"；看到但不理解数组由哪些元素组成。

一切都在vue路由器v3.x.中工作

我的错误：

[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 [];
},
},
},

产品卡片.vue

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

Getter

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

store.js

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

Answer 1

您不能在路由器链接中将数组的getter cart作为参数传递。如果您想将cart的getter访问到您的组件中，只需在该组件中直接访问它。

或者你不需要getter。只需在组件中创建一个计算属性。

params只能是字符串或数字，并且需要在路由器中声明读取参数。https://next.router.vuejs.org/guide/essentials/dynamic-matching.html

要访问存储中的对象数组或组件的数据，只需使用computed属性。