Question

我有ShopCart.vue组件（下面的代码），该组件正在从父级接收道具。这些道具之一是cartItems。我正在mounted()中的cartItems上运行一个函数，但是为了确保道具已经准备好，我将它们放在Vue.nextTick中，在StackOverflow上我将其视为解决方案。这似乎解决了问题，但我注意到它不可靠，并且在某些情况下，当函数准备就绪时，cartItems将为空。为了测试这一点，我将它们放在setTimeout中3秒钟，然后cartItems传递了20个项目，因此我知道它正在工作..它运行得太快了。我该如何解决以确保道具在该组件中准备就绪？

ShopCart.vue的一部分

export default {

data() {
    return {
        dataLoaded: false,
        modalType: null,
        orderNotes: null, 
        test: null,
        expireTimes: {

        }
    }
},
props: {
        cartItems:  {type: Array},
        cart:       {type: Object},
        customer:   {type: Object}
    },
mounted() {
    let vm = this;      

    Vue.nextTick(() => {
        vm.cartItems.forEach((item, index) => {
            Vue.set(vm.expireTimes, item.item_id, "")
            this.checkItemExpiry(item.expire_at, item.item_id)

        });
    });

}

Answer 1

您可以尝试在cartItems道具上使用Vue's watch property，这样当它更改时就可以对其进行处理，就像这样：

watch: {
    cartItems(newVal) {
        newVal.forEach((item, index) => {
            Vue.set(vm.expireTimes, item.item_id, "")
            this.checkItemExpiry(item.expire_at, item.item_id)
        });
    }
}

如果在父组件中cartItems尚未准备好，请确保传递一个空数组，或者在if(newVal){ ... }迭代之前用forEach之类的方式进行验证。

Answer 2

@Francisco Hanna的答案将对您有用，但是如果仅在存在任何cartItems之后仅使用v-if来呈现shopCart组件，就可以避免观察者（它正在消耗资源）：

在父组件中：

<shop-cart :cartItems="cartItems" v-if="cartItems.length"></shop-cart>

Answer 3

Vue.nextTick通常在更新反应性组件时使用，并且您想将DOM与更新后的值一起使用。 Vue.nextTick不适用于异步操作，因为高级异步操作的时间未知。

您最好的选择是在显示内容时使用v-if。这也将允许您使用v-else并显示预加载器。

Vue：在挂载运行之前等待道具

3 个答案: