Vue：在挂载前等待 prop 运行

dohp0rv5 于 2023-10-23 发布在 Vue.js

关注(0)|答案(4)|浏览(148)

我有一个组件ShopCart.vue（代码如下），它从父组件接收 prop 。其中一个 prop 是cartItems。我在mounted()中的cartItems上运行一个函数，但为了确保 prop 已经准备好，我把它们放在Vue.nextTick中，我在StackOverflow上看到了一个解决方案。这似乎解决了这个问题，但我注意到它并不可靠，并且在函数准备就绪时，cartItems会为空。为了测试这一点，我把它们放在一个setItem中3秒钟，然后cartItems有20个通过的项目，所以我知道它在工作..只是运行得太快了。如何解决这个问题以确保该组件中的 prop 已准备就绪？

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

来源：https://stackoverflow.com/questions/55318277/vue-waiting-for-props-before-mounted-is-run

4条答案

按热度按时间

enxuqcxy1#

@弗朗西斯科Hanna的回答对你来说是可行的，但是如果你只是在任何cartItem存在之后才使用v-if来呈现shopCart组件，你就可以避免一个观察者（这会消耗资源）：
在父零部件中：

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

赞(0）回复(0）举报 2023-10-23

cqoc49vn2#

你可以尝试在cartItems prop上使用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还没有准备好，请确保传递一个空数组，或者在forEach迭代之前使用类似if(newVal){ ... }的东西进行验证。

赞(0）回复(0）举报 2023-10-23

bvuwiixz3#

nextTick通常在更新React式组件时使用，并且您希望使用具有更新值的DOM。Vue.nextTick并不适用于BRAC操作，因为BRAC操作的时间事先并不知道。
最好的办法是在显示内容时使用v-if。这也将允许你使用v-else，并可能显示一个预加载程序。

赞(0）回复(0）举报 2023-10-23

fd3cxomn4#

this._props.cartItems可以在vue2中的mounted()内部访问

赞(0）回复(0）举报 2023-10-23