Question

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

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（），则两者均不能接收相同的数组，但是如果使用计算，则可以。但是，由于需要在data（）中使用它，所以我无法在CoNotificationItem中使用计算型，因此可以将其与v-model绑定。

所以，我的问题是，如何在CoNotificationItem上进行通知与不（变量）相同，但可以在data（）中访问，所以我可以将v模型放入其中-为什么我得到了混合价值？

注意：我还尝试了计算和监视并创建/安装。

这个问题困扰了我整整半天，我在正式文档以及关于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

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

<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重用道具和数据。

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

道具以某种方式混杂在组件之间

1 个答案: