组件的 props 在子组件中调用时返回 null答案

【问题标题】：Component's props return null when called upon in child组件的 props 在子组件中调用时返回 null
【发布时间】：2018-07-25 05:54:45
【问题描述】：

我有两个组件，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.

当 parent 被挂载时，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;
      }

我在这里错过了什么？

【问题讨论】：

getCartTotalRaw 是计算函数还是普通方法？
您发布的部分似乎没问题。那么您可以发布更多代码还是使用Vue Devtool之类的工具来跟踪数据和道具？
@Ferrybig 一个正常的方法。
@obfish 这是我能想到的唯一相关代码。我已经看到使用 Vue Devtools 将数据注册在道具本身中，但它只是访问导致问题的道具。
完全空白的警报可能意味着 this.items=[]。是 this.items = [] 的初始值吗？

标签： laravel vue.js vuejs2

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

当挂载父级时，items 数组会像这样填充...

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

由于在创建实例之前没有数据，因此没有机会通过 mount 来操作它们。

因此，在 created() 钩子中调用您的方法。

【讨论】：

【解决方案3】：

据我所知，问题源于您对父母的承诺。虽然 Vue 在挂载和渲染子节点时本质上是响应式的，但由于承诺，子节点尚未将 items 传递给它。

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

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

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

【讨论】：