Vue：在安装之前等待道具运行

Question

我有组件 ShopCart.vue（下面的代码），它从父级接收道具。这些道具之一是cartItems. 我正在 cartItems 上运行一个函数，mounted()但为了确保道具准备就绪，我将它们放入 中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

@Francisco Hanna 的答案对您有用，但如果您仅在任何 cartItems 存在后才使用v-if渲染shopCart组件，则可以避免使用观察者（消耗资源）：

在父组件中：

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

Answer 2

你可以尝试在prop 上使用Vue 的 watch 属性，cartItems这样当它改变时你就可以处理它，像这样：

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迭代之前使用类似的内容进行验证。