vue.js 子組件未更新

Question

我有一個父組件和一個子組件。 父組件“邀請”包含多個“邀請”子組件。 當我刷新網站時，所有邀請都會顯示在網站上，但是一旦我更新了邀請數組（添加邀請），它就不會顯示在頁面上，即使我可以在 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>

有人可以告訴我有什么問題嗎？

Answer 1

我不是 100% function 是你專門用來修改數組的，但我注意到一個潛在的掛斷的地方是......

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 唯一看不到的兩件事.

一種創建新數組 object 的方法是concat() ：

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

...因為，如concat()的文檔中所述（ 鏈接到 MDN Docs ）：

返回值：一個新的 Array 實例。

... Vue 會正確看到。