是否可以在 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() 方法之前，所以我的通知对象没有头像属性在执行 v-for 时。

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

谢谢！

Answer 1

除非我在这里遗漏了什么，否则没有理由延迟执行 v-for 指令。您需要做的就是确保 notification 对象已经设置了 avatar 字段，即使它设置为 undefined。您可以从父级执行此操作，也可以使用计算属性来克隆传入对象属性集：this.initialUser.unread_notifications.map(notification => Object.assign({ avatar: undefined }, notification)

如果您不想在加载头像之前呈现通知，您可以：

将 v-if="!!notification.avatar" 添加到 li 元素。（标准的 Vue linter 会建议不要这样做；我碰巧认为它很方便。它本质上是根据条件过滤你的输出。）
创建一个计算属性，比如 unread_notifications_with_avatars，它等于（例如）this.initialUsers.unread_notifications.filter(notification => !!notification.avatar)，并在您的 v-for 指令中使用它。

如果你真的想在所有头像调用完成之前不呈现列表，也有一些方法可以做到这一点（例如使用 Promise.all(...).then(() => this.showTheList = true)）。虽然它有点棘手，但在我看来你在这种情况下并不真正需要它。

Answer 2

使用

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

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

这可能是 objects 以及 arrays 的问题。

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

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

Is it possible to run v-for after created() is complete?

javascript

vue.js

es6-promise

axios

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

Is it possible to run v-for after created() is complete?

javascript

vue.js

es6-promise

axios

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