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

Question

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

vue-router 一切正常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 [];
      },
    },
  },

ProductCard.vue

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

Getter

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

store.js

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

Answer 1

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

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

参数只能是字符串或数字，需要在路由器中声明

读取参数。 https://next.router.vuejs.org/guide/essentials/dynamic-matching.html

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