J'essaie d'ajouter l'avatar correspondant à chaque notification, afin que je puisse l'afficher avec le reste de la notification, mais je ne peux pas le comprendre par moi-même. Voici le code HTML à l'intérieur du modèle Vue.js :

    <li class="notification" v-for="(notification, index) in notifications">
        <a>
            <span class="image">
                <img :src="notification.avatar" alt="Avatar" />
            </span>

        <span class="link">
            <span v-text="notification.data.sender_name"></span>
        </span>

        <span class="message" v-text="notification.data.message"></span>
        </a>
    </li>

Et voici les js:

data() {
    return {
        user: this.initialUser,
        notifications: this.initialUser.unread_notifications,
    }
},

created() {
    let self = this;
    self.notifications = this.initialUser.unread_notifications;

    self.notifications.forEach(function(notification) {
        if(notification.data.sender_id) {
            axios.post(self.user.path + '/get-avatars', {
                id: notification.id,
            }).then((response) => {
                let promise = new Promise(function (resolve, reject){
                    notification.avatar = response.data;
                });
            });
        }
    });
},

Le problème que j'ai est que le v-for s'exécute avant la méthode created(), de sorte que mon objet de notifications n'a pas la propriété avatar au moment où le v-for est effectué.

Existe-t-il un moyen d'exécuter le v-for uniquement après la fin de la création () ?

Je vous remercie!

0
Matt E. 16 mars 2019 à 02:07

2 réponses

Meilleure réponse

Utilisation

this.$set(notification, 'avatar', response.data)

Pour déclencher la réactivité manuellement. Vous devez avoir une propriété avatar au préalable afin d'avoir automatiquement de la réactivité lors de l'exécution de notification.avatar = .... Si vous n'avez pas la propriété, vous devez utiliser cette fonction d'assistance de Vue.

Cela peut être un problème avec les objets ainsi que les tableaux.

Pour plus d'informations, voir https://vuejs.org/v2/guide/reactivity.html

1
Flame 15 mars 2019 à 23:52

À moins que quelque chose ne me manque ici, il n'y a aucune raison de retarder l'exécution de la directive v-for. Tout ce que vous devez faire est de vous assurer que l'objet notification a le champ avatar déjà défini, même s'il est défini sur undefined. Vous pouvez le faire à partir du parent ou avec une propriété calculée qui clone les objets entrants avec le jeu de propriétés : this.initialUser.unread_notifications.map(notification => Object.assign({ avatar: undefined }, notification)

Si vous ne souhaitez pas qu'une notification s'affiche tant que l'avatar n'est pas chargé, vous pouvez soit :

  1. Ajoutez v-if="!!notification.avatar" à l'élément li. (Le linter standard de Vue déconseillera cela ; je pense que c'est assez pratique. Il filtre essentiellement votre sortie en fonction de la condition.)
  2. Créez une propriété calculée, disons unread_notifications_with_avatars, qui est égale à (par exemple) this.initialUsers.unread_notifications.filter(notification => !!notification.avatar), et utilisez-la dans votre directive v-for.

Si vous voulez vraiment ne pas afficher la liste tant que tous les appels d'avatar ne sont pas terminés, il existe également des moyens de le faire (par exemple en utilisant Promise.all(...).then(() => this.showTheList = true)). C'est un peu plus délicat cependant et il ne me semble pas que vous en ayez réellement besoin dans ce cas.

0
Mattias Martens 15 mars 2019 à 23:24