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

【问题标题】：[Vue warn]: Invalid prop: type check failed for prop "productCartData". Expected Object, got String with value "[object Object]"[Vue 警告]：无效的道具：道具“productCartData”的类型检查失败。预期对象，得到值为“[object Object]”的字符串
【发布时间】：2021-09-04 00:13:35
【问题描述】：

“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 } }">

购物车.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 {};
      },
    },
  },

吸气剂

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

store.js

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

【问题讨论】：

试用:product-cart-data="product"
@BoussadjraBrahim 你好，没有任何改变。我不认为问题出在语法上
什么是cartData，它是如何填充的？你可以console.log(cartData)
@MattU cartData 是数组。当我将产品添加到购物车时，它会添加到 cardData 数组中。但是现在如果我这样 console.log(cartData) ：mounted() { console.log(cartData); }, 在控制台Uncaught (in promise) ReferenceError: cartData is not defined
@MattU 这是我在 vue2 和 vue-router v3.x 中的项目。几乎相同的代码。同样的逻辑。但没有错误。 github.com/adlettaigulov/online-store/blob/master/src/…

标签： vue.js vuex vue-router vuejs3 vue-router4

【解决方案1】：

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

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

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

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

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

【讨论】：