javascript - Prop 在组件之间以某种方式混合

Question

我将两个不同的数组传递给同一个组件，但它的两个不同实例。然后在这些实例中，我执行 v-for 并使用 props 将数组的单个项目发送到另一个组件。问题是，当我检查最后一个组件的 Vue 工具时，我发现 prop 很好，但是当我尝试将它分配给 data 时，它会从前一个数组(发送到另一个组件的数组)返回 prop。

Laravel:

<co-notifications class-name="writable" nots="{{ $notifications[0] }}"></co-notifications>

<co-notifications class-name="writable extended" nots="{{ $notifications[1] }}"></co-notifications>

协同通知:

<template>
<div>
    <div v-for="notification in notifications">
        <co-notification-item :class-name="className" :not="notification"></co-notification-item>
    </div>
</div>
</template>

    <script>
    import notificationComponent from './NotificationComponent.vue';

    export default {
        props: ['className', 'nots'],
        components: {
            'co-notification-item': notificationComponent
        },
        // data() {
    //     return {
    //         notifications: JSON.parse(this.nots),
    //     }
    // },
    computed: {
        notifications(){
            return JSON.parse(this.nots)
        }
    },
    }
</script>

CoNotificationItem

<template>
<div :class="['tableItem',className]">
    <div class="textareaWrapper">
        <input type="text" class="form-control" placeholder="Title" v-model="notification.title" v-if="notification.type === 'main'">
        <textarea class="form-control" rows="6" placeholder="Some text..."
                  v-model="notification.text"></textarea>
    </div>
    <div class="buttonWrapper">
        <button type="button" class="btn btn-success" @click="updateNotification"><i
                class="fe fe-check mr-2"></i>Save
        </button>
        <button type="button" class="btn btn-danger" @click="deleteNotification"><i
                class="fe fe-check mr-2"></i>Delete
        </button>
    </div>
</div>
</template>


    <script>
    import notificationComponent from './NotificationComponent.vue';
    export default {
        props: ['className', 'not'],
        components:{
            'co-notification-item': notificationComponent
        },
        data(){
           return {
               notification: this.not
           }
        },
        methods: {
            updateNotification(){
            this.notification.text = "test";

            },
            deleteNotification(){


            }
        }
    }
</script>

至于数组中的数据，我在arr(0)中有2个，在arr(1)中有2个。当我在第一个通知上打开 Vue 工具时，我看到了这个(这很好)

但是，当我打开从 arr(1) 读取的其他通知时，我看到了这一点(这显然不是它应该的样子)

正如你所看到的，我在 CoNotification 中使用了计算，但如果我删除它并仅使用 data() ，两者都不会收到相同的数组，但如果我使用计算，那就没问题了。但是，我无法在 CoNotificationItem 中使用计算，因为我需要将其放在 data() 中，以便我可以将其与 v-model 绑定(bind)。

所以，我的问题是，如何使 CoNotificationItem 上的通知与 not (变量)相同，但可以在 data() 中访问，以便我可以将 v-model 放入其中 - 为什么我我得到混合值？

注意:我还尝试了计算和监视以及创建/安装。

我已经被这个问题困扰了半天，我在官方文档和 stackoverflow 等的教程/问题中搜索了我的 as*。

我尝试过的一些搜索:

Vue.js passing props to data

Passing data from Props to data in vue.js

https://forum.vuejs.org/t/update-data-when-prop-changes-data-derived-from-prop/1517

Answer 1

为每个 v-for 项添加唯一的 key 属性将解决该问题

<div v-for="notification in notifications" :key="someUniqueKey">
    <co-notification-item :class-name="className" :not="notification"></co-notification-item>
</div>

我无法解释清楚。但据我了解，Vue 通过 key 属性跟踪元素。给这些元素赋予唯一的key将告诉Vue它们是不同的元素。因此它将阻止 Vue 重复使用 prop 和 data。

如果有人可以解释更多详细信息并引用文档，请添加评论或新答案。我会删除我的答案。