道具以某种方式在组件之间混合答案

【问题标题】：Props are somehow getting mixed between components道具以某种方式在组件之间混合
【发布时间】：2019-02-05 18:41:45
【问题描述】：

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

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 个。当我在 FIRST 通知中打开 Vue 工具时，我看到了这个（这很好）

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

如您所见，我将计算用于 CoNotification，但如果我将其删除并仅使用 data() 两者都不会收到相同的数组，但如果我使用计算它就可以了。但是，我不能在 CoNotificationItem 中使用计算，因为我需要在 data() 中使用它，以便可以将它与 v-model 绑定。

所以，我的问题是，如何使 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

【问题讨论】：

尝试将唯一的key 添加到您的v-for 项目。如果它不起作用，请在实时代码编辑器中重新生成您的问题，以便我们可以使用它
嗯，它似乎正在工作（但前提是我已经计算了 NotificationItem）......很奇怪，我之前尝试过 :key 一次，但它没有工作。请将此作为实际答案，以便我标记为已回答

标签： javascript laravel laravel-5 vue.js vuejs2

【解决方案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。

如果有人可以解释更多细节并参考文档，请添加评论或新答案。我将删除我的答案。

【讨论】：