时间戳

首页 > 解决方案 > Vue：在挂载之前等待道具运行

vue.js - Vue：在挂载之前等待道具运行

问题描述

我有组件 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)

        });
    });

}

标签： vue.js

解决方案

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

在父组件中：

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

推荐阅读