javascript - 是否可以在created()完成后运行v-for？

Question

我试图将相应的头像添加到每个通知中，以便我可以将其与通知的其余部分一起显示，但我无法自己解决这个问题。这是 Vue.js 模板内的 HTML:

    <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>

这是 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;
                });
            });
        }
    });
},

我遇到的问题是 v-for 在 created() 方法之前运行，因此我的通知对象没有 avatar 属性v-for 执行的时间。

有什么办法可以让我在created()完成后才运行v-for吗？

谢谢!

Answer 1

使用

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

手动触发 react 。您需要事先拥有一个 avatar 属性，以便在执行 notification.avatar = ... 时自动具有反应性。如果您没有该属性，则需要使用 Vue 中的此辅助函数。

这可能是对象以及数组的问题。

有关更多信息，请参阅 https://v2.vuejs.org/v2/guide/reactivity.html