javascript - vue.js 子组件没有更新

问题描述

我有一个父组件和一个子组件。父组件“邀请”包含多个“邀请”子组件。当我刷新网站时，所有邀请都会显示在网站上，但是一旦我更新了邀请数组（添加邀请），它就不会显示在页面上，即使我可以在 vue 开发人员上看到正在更新的数组安慰。我必须刷新页面才能看到它。

当某些东西被添加到数组（更新）时，它看起来像这样：见这里

当我将页面添加到数组后刷新页面时，它看起来像这样。

看这里

这是我的两个组件：

邀请.vue

<template>
<li class="nav-item dropdown" id="invitations">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Invitations <i class="far fa-bell"></i>
    </a>

    <div class="dropdown-menu" style="min-width: 20rem" aria-labelledby="navbarDropdown" 
    id="dropdownMenu">

        <div v-for="invitation in invitations" v-bind:key="invitation.id" v- 
    bind:invitations="invitations">

            <Invitation :invitation="invitation" v-on:accept-invitation="accept" v-on:reject- 
    invitation="reject" v-bind:invitation="invitation"></Invitation>

        </div>
    </div>
</li>
</template>

<script>
import Invitation from "./Invitation";

export default {
    name: "Invitations",
    props: {
        invitations: {
            type: Array,
            default: [],
            required: true
        },
        user: {
            type: Object,
            required: true
        }
    },
    methods: {
        accept(team_id) {
            axios.get('/request/accept/' + team_id)
                .then((response) => {
                    this.invitations = this.invitations.filter(invitation => invitation.id)
                });
        },
        reject(team_id) {
            axios.get('/request/reject/' + team_id)
                .then((response) => {
                    this.invitations = this.invitations.filter(invitation => invitation.id)
                });
        },
        handleIncoming(invitation) {
            this.saveNewInvitation(invitation);
            return;
        },
        saveNewInvitation(invitation) {
            this.invitations.push(invitation);
        },
    },
    mounted() {
        Echo.channel('invitations.' + this.user.id)
            .listen('NewInvitation', (e) => {
                this.handleIncoming(e);
            });
    },
    components: {Invitation}
}
</script>

邀请.vue

<template>
<div :id="invitation.id" class="mb-2">
    <a class="ml-4" title="Show team info" style="margin-right: 90px"
       :href="'/team/index/' + invitation.id" v-bind:name="invitation.name">{{invitation.name}}</a>

    <a class="float-right mr-3" href="#" @click="$emit('reject-invitation', invitation.id)">
        <i class="fas fa-times reject" :teamId="invitation.id"></i>
    </a>

    <a class="float-right mr-3" href="#" @click="$emit('accept-invitation', invitation.id)">
        <i class="fas fa-check accept" :teamId="invitation.id"></i>
    </a>
</div>
</template>

<script>
export default {
    name: "Invitation",
    props: {
        invitation: {
            type: Object,
            default: null
        }
    }
}
</script>

有人可以告诉我有什么问题吗？

标签： javascriptnode.jsvue.js

解决方案

我不是 100% 你专门用来修改数组的哪个函数，但我注意到一个潜在的挂断的地方是......

saveNewInvitation(invitation) {
  this.invitations.push(invitation);
}

在 Vue 文档中（链接到“Reactivity in Depth -- For Arrays”）Vue 特别警告它不会注意到底层数组的突变。

Vue 无法检测到数组的以下更改：

当您直接使用索引设置项目时，例如vm.items[indexOfItem] = newValue

当您修改数组的长度时，例如vm.items.length = newLength

虽然.push()可能不会立即触发警报，但当您阅读 push 方法的文档（链接到 MDN 文档）时，您会注意到它正在改变数组，而不是创建新数组。

push() 方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。[重点补充]

正如之前的 Stack Overflow 问题（讨论链接）中所见，push 方法的内部工作只做两件事——改变长度，并按索引设置项目——这是 Vue 唯一看不到的两件事.

将创建一个新的 Array 对象的一种方法是concat()：

saveNewInvitation(invitation) {
  this.invitations = this.invitations.concat(invitation)
}

...因为，如concat()（链接到 MDN 文档）的文档中所述：

返回值：一个新的 Array 实例。

... Vue 会正确看到。

javascript - vue.js 子组件没有更新

问题描述

解决方案

推荐阅读