0

“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: [],
      },
    },
4

1 回答 1

1

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

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

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

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

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

于 2021-06-19T19:59:02.843 回答