Javascript 为什么我的数组会重叠

我有一个简单的项目，我试图学习vue.js使用组件的概念，组件之间的通信我使用事件总线我使用webkit简单模板来实现这一点，基本上，我有一个组件，它包含在一个简单的文本区域中，我在其中添加了一些文本，该文本应该显示在我的第二个组件中，这是一个模板，在该模板中，我呈现一个数组，其中包含我插入的所有文本，如引号列表

组件添加报价

组件报价

问题是，每次我添加引号时，文本都会替换前面的所有元素

例如：

第9个条目：text:abcdef，数组中的所有条目都有这个text值，我的所有div都有abcdef值，发生了什么：S

const quoteBus=新的Vue； Vue.组件“addQuote”{ 模板：“addQuote模板”， 方法：{ 加引号{ 如果此计数器小于10{ 这个.counter++； this.quote.key=+新日期； quoteBus.$emit'saveQuote'，Object.assign{}，this.quote； } } }, 数据：函数{ 返回{ 引用：{}， 柜台:0 } }, 创造{ “递减计数器”上的quoteBus.$，=>{ 这个柜台- }; } }; Vue.component'quotes'{ 模板：“引用模板”， 数据：函数{ 返回{ 引号：[] } }, 方法：{ 删除引用{ this.quotes.i，1； quoteBus.$emit'decreaseCounter'； } }, 创造{ quoteBus.$在'saveQuote'上，quote=>{ this.quotes.unshiftquote； console.logJSON.stringifythis.quotes； }; } }; 新Vue{ el:“应用程序” }; 引述： 添加报价 {{quote.text}

---

试试{quotes[$index].text}}也许吧？我想要一个符咒，你能给我解释得更好一点吗，你说每次我创建一个对象时，我都会向它添加相同的引用，所以当我取消移动另一个对象时，它会因为引用而覆盖之前的对象？我重新编写了我的答案，试图让它更清楚。我明白它为什么会有这种行为，我只是不明白一件事，如果我每次添加新引号时都创建一个对象，为什么它引用同一个对象？是什么使它具有这种行为？通常情况下，如果我这样做：var myObj={text:someText]，var anotherObj=myObj，anotherObj.text=someText每次添加新引号时，您都没有创建一个新对象。您发出了this.quote，这就是被取消移位到引号数组中的内容。{}在我的回答中是一个新对象，object.assign将值复制到其中。

<template>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <div class="col-md-offset-3 col-md-6">
                    <label>Quote:</label>
                    <textarea v-model="quote.text" class="form-control" rows="5"></textarea>
                    <div class="text-center">
                        <button @click="addQuote" class="btn btn-primary center">Add Quote</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { quoteBus } from '../main.js';

    export default {
        methods: {
            addQuote() {
                if (this.counter < 10) {
                    this.counter++;
                    this.quote.key =+ new Date();
                    quoteBus.$emit('saveQuote', this.quote);
                }
            }
        },
        data: function () {
            return {
                quote: {},
                counter: 0
            }
        },
        created(){
            quoteBus.$on('decreaseCounter', () => {
                this.counter--
            });
        }
    }

</script>

<style scoped>
    .row {
        margin-top: 40px;
    }

    .center {
        margin: 0 auto;
    }

    div .text-center {
        margin-top: 20px;
    }
</style>

<template>
    <div class="row">
        <div class="col-md-3" v-for="(quote,$index) in quotes" @click="deleteQuote($index)" :key="quote.key">
            <div class="spacing">
                <h2>{{quote.text}}</h2>
            </div>
        </div>
    </div>
</template>

<script>
    import { quoteBus } from '../main.js';

    export default {
        data: function () {
            return {
                quotes: []
            }
        },
        methods: {
            deleteQuote(i){
                this.quotes.splice(i,1);
                quoteBus.$emit('decreaseCounter');
            }
        },
        created() {
            quoteBus.$on('saveQuote', quote => {
                this.quotes.unshift(quote);
                console.log(JSON.stringify(this.quotes));
            });
        }
    }

</script>

<style scoped>
    h2 {
        font-family: 'Niconne', cursive;
    }

    div .col-md-3 {
        border: 1px solid darkgray;
        padding: 10px;
    }

    div .row {
        margin-top: 40px;
    }

    .spacing {
        margin: 10px;
        padding: 10px;
    }
</style>