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时不具有avatar属性。 / p>

只有在created（）完成之后，有什么方法可以运行v-for吗？

谢谢！

Answer 1

使用

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

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

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

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

Answer 2

除非我在这里缺少任何内容，否则没有理由延迟执行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)）。不过，这有点棘手，在我看来，这并不是您在这种情况下实际需要的。

在created（）完成之后是否可以运行v-for？

2 个答案: