时间戳

首页 > 解决方案 > created() 完成后是否可以运行 v-for ？

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

问题描述

我正在尝试将相应的头像添加到每个通知中，以便我可以将其与通知的其余部分一起显示，但我自己无法解决这个问题。这是 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()，因此我的通知对象在执行 v-for 时没有 avatar 属性。

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

谢谢！

标签： javascriptvue.jsaxioses6-promise

解决方案

利用

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

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

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

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

推荐阅读