3
votes

Vue: Attendre les accessoires avant de monter est exécuté

J'ai un composant, ShopCart.vue (code ci-dessous), qui reçoit des accessoires du parent. L'un de ces accessoires est cartItems . J'exécute une fonction sur les cartItems dans monté () mais pour m'assurer que les accessoires étaient prêts, je les ai mis dans Vue.nextTick , ce que j'ai vu comme une solution ici sur StackOverflow. Cela a semblé résoudre le problème mais j'ai remarqué que ce n'était pas fiable et qu'il y avait des cas où les cartItems étaient vides lorsque la fonction était prête. Pour tester cela, je les ai mis dans un setTimeout pendant 3 secondes, puis le cartItems avait 20 éléments passés, donc je sais que ça marche ... ça fonctionne trop vite. Comment puis-je résoudre ce problème pour m'assurer que les accessoires sont prêts dans ce composant?

Fait partie de ShopCart.vue

export default { p>

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

2 commentaires

Le cartItems provient-il d'un appel asynchrone? (c.-à-d. appel API)

@FranciscoHanna oui, sur le composant parent, ça vient d'un appel API

3 Réponses :

3
votes

Vous pouvez essayer d'utiliser la propriété de surveillance de Vue sur cartItems code> prop donc quand il change, vous pouvez le traiter, comme ceci:

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

  Assurez-vous de passer un tableau vide si le  cartItems  n'est pas prêt dans le parent ou validez avec quelque chose comme  if (newVal) {...}  avant l'itération  forEach .

3 commentaires

génial merci. Vous ne savez pas si je devrais alors supprimer complètement la logique mount () ?

@jjoan Oui, vous pouvez supprimer la méthode montée en toute sécurité.

@jjoan Acceptez cette réponse si elle a résolu votre problème s'il vous plaît!

7
votes

La réponse de @Francisco Hanna fonctionnera pour vous, mais vous pouvez éviter un observateur (qui consomme des ressources) si vous utilisez simplement v-if pour rendre le composant shopCart seulement après l'existence de tout cartItems:

dans le composant parent:

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

1 commentaires

c'est en fait une idée très intelligente

0
votes

Vue.nextTick est généralement utilisé lors de la mise à jour d'un composant réactif et que vous souhaitez utiliser le DOM avec la valeur mise à jour. Vue.nextTick n'est pas destiné aux opérations asynchrones, car l'heure de l'opération asynchrone n'est pas connue à l'avance.

Votre meilleur pari est d'utiliser un v-if lors de l'affichage du contenu. Cela vous permettra également d'utiliser v-else et peut-être d'afficher un préchargeur.

0 commentaires