Question

我有两个组件，CartOverview和CartCheckout。 CartOverview是CartCheckout的父母。

我正在将数组传递给子组件，如下所示：

<cart-checkout :items="items"></cart-checkout>

在子组件中，我已经声明了道具：

props:['items']

每当我尝试访问道具时，都不会返回任何内容。我用Vue DevTools来看看发生了什么，令人困惑的部分是I can quite clearly see that the data is being passed down correctly.

安装父级时，items数组的填充方式如下：

fetchCartItems() {
        axios.get('/cart-items')
        .then((response) => {
          this.items = response.data;
          this.total = this.getCartTotal();
        })
        .catch((error) => {
          console.log(error);
        });
      },

为了澄清，我一直试图从道具中获取数据：

this.items

但就像我说的那样，nothing is returned.

getCartTotalRaw() {
        let total = 0;
        alert(this.items);
        this.items.forEach(function(item) {
          total += (Number(item.product.price) * item.quantity);
        });
        return total;
      }

我在这里缺少什么？

Answer 1

安装父级时，items数组就像这样填充......

你走错了路。您需要使用created生命周期钩子。 mounted挂钩用于处理创建的数据或说DOM已呈现，您想要更改/操作它们。

由于在创建实例之前没有数据，因此无法通过挂载操作它们。

因此，在created（）钩子中调用你的方法。

Answer 2

正如WildBeard指出的那样，承诺可能是在之后实现的。不确定这是否是最好的方法，但我的解决方案是在初始化组件之前检查items数组的长度。虽然这在每种情况下都不是理想的，因为空数组意味着永远不会呈现子组件，但这适用于我的场景，就像数组是空的一样 - 用户不应该看到子组件中包含的按钮

<cart-checkout v-if="items.length != 0" :items="items"></cart-checkout>

Answer 3

据我所知，这个问题源于你对父母的承诺。虽然当孩子被安装和渲染时，Vue本质上是反应性的，但由于承诺，孩子还没有将items传递给它。

你可以做的是在孩子身上添加一个观察者。见this example.

...    
watch: {
    items() {
        this.calcTotal();
    }
},
...

这不是一个完美的娱乐活动，我使用setTimeout代替ajax调用，但概念仍然相同。如果您在items上删除观察者，则在mounted被触发时计算的总数仍为0。但是，由于Vue的反应性，该列表正常呈现。

当在子节点中调用时，Component的props返回null

3 个答案: