VueJS用于循环创建组件，组件似乎已链接

Question

我正在对数组进行for循环，对于每个值我正在创建一个组件。我的印象是我需要在for循环上放置一个key，以便Vue知道它是唯一的？

<div v-for="hours in location.hours" class="businessHours" :key="hours.id">
    <business-hours :response="hours" :unique-key="uniqueKey" :default-weekdays="response.weekdays">
        <div slot-scope="{ hours, weekdays, title, uniqueKey, toggle, inArray, componentKey }">

            <div class="panel-heading v-center">
                <div class="field">

在这个组件中，我有一些逻辑可以选择/取消选中复选框，但是这两个组件似乎是链接在一起的。当我单击其中一个复选框时，另一个也会更改！

这是我的组件：

<template>
    <div>
        <slot :hours="response" :weekdays="weekdays" :title="title" :toggle="toggle" :inArray="inArray" :componentKey="componentKey"></slot>
    </div>
</template>
<script>

    export default {
        props: [ 'response', 'uniqueKey', 'defaultWeekdays' ],
        data: function() {
            return {
                weekdays: this.response.weekdays,
                componentKey: this.key()
            }
        },
        created() {
            if (this.weekdays === undefined) {
                this.weekdays = this.defaultWeekdays;
            }
        },
        methods: {
            title: function() {

                if (this.weekdays === undefined) return;

                let selected = Object.keys(this.weekdays).filter((e) => { if (this.weekdays[e].selected) return e });

                if (selected.length === 0) return;

                let start = this.weekdays[parseInt(selected[0])].value;
                let end = this.weekdays[parseInt(selected[selected.length - 1])].value;

                if (start === end) {
                    return start.charAt(0).toUpperCase() + start.substring(1);
                }
                return start.charAt(0).toUpperCase() + start.substring(1) + ' - ' + end.charAt(0).toUpperCase() + end.substring(1);
            },
            toggle: function(index) {

                let clicked = this.weekdays[index];
                let action = clicked.selected ? 'remove' : 'add';
                let selected = Object.keys(this.weekdays).filter((i) => { if (this.weekdays[i].selected) return i });

                let start = parseInt(selected[0]);
                let middle = parseInt(selected[Math.floor(selected.length / 2)]);
                let end = parseInt(selected[selected.length - 1]);

                if (isNaN(start) && isNaN(middle) && isNaN(end)) {
                    start = middle = end = index;
                }

                // Add and remove multiple days
                if (index < (start - 1) && action === 'add') {
                    for (let i = index; i <= (start - 1); i++) {
                        this.weekdays[i].selected = true;
                    }
                }
                if (index > start && index < middle && action === 'remove') {
                    for (let i = start; i <= index; i++) {
                        this.weekdays[i].selected = false;
                    }
                }

                if (index > (end + 1) && action === 'add') {
                    for (let i = end + 1; i <= index; i++) {
                        this.weekdays[i].selected = true;
                    }
                }
                if (index < end && index >= middle && action === 'remove') {
                    for (let i = index; i <= end; i++) {
                        this.weekdays[i].selected = false;
                    }
                }

                // Add and remove single days
                if ((index === (end + 1) || index === (start - 1)) || (index === end || index === start) && action === 'add') {
                    this.weekdays[index].selected = true;
                }
                if ((index === end || index === start) && action === 'remove') {
                    this.weekdays[index].selected = false;
                }
            },
            inArray: function(needle) {
                let length = this.weekdays.length;
                for(let i = 0; i < length; i++) {
                    if(this.weekdays[i] === needle) return true;
                }
                return false;
            },
            key: function() {
                return Math.random().toString(36).replace(/[^a-z0-9]+/g, '').substr(0, 10);
            }
        }

    }
</script>

有人可以帮我这件事的原因吗？