Javascript 对象数据覆盖所有以前的数据

所以基本上我有两个组件，我使用webkit简单模板来组织我的代码，在我的项目中我有一个问题，基本上我有一个类似于textarea的东西，每次我在那里写东西时，它都会显示一个带有该文本的div，所以在我的textarea组件中我做了如下操作：

<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.id = this.counter;
                    quoteBus.$emit('saveQuote', this.quote);
                }
            }
        },
        data: function () {
            return {
                quote: {},
                counter: 0
            }
        },
        created(){
            quoteBus.$on('decreaseCounter', () => {
                this.counter--
            });
        }
    }

</script>

第二项补充：

---

数组[1]0:Object\uuuu ob\uuuu:Observerid:2text:“second”proto：Object1:Object\uu ob\uuuuuuu:Observerid:2text:“second”proto：Object\uu ob\uuuuuuuuu:Observerlength:2\uu proto\uuuu:Array

问题是您需要一个唯一标识每个元素的键。 我建议加上这个

this.quote.id = this.counter;
this.quote.key = + new Date();//new property 

然后在另一个组件中

<div class="col-md-3" v-for="(quote,$index) in quotes" @click="deleteQuote($index)" :key="quote.key">

---

不要将您的id用作密钥，因为它会根据引号在数组中的位置发生变化。

问题在于您需要一个唯一标识每个元素的密钥。 我建议加上这个

this.quote.id = this.counter;
this.quote.key = + new Date();//new property 

然后在另一个组件中

<div class="col-md-3" v-for="(quote,$index) in quotes" @click="deleteQuote($index)" :key="quote.key">

---

不要将您的id用作密钥，因为它会根据报价单在数组中的位置发生变化。

我认为以前的所有div仍然只绑定到一个模型。您需要执行一些克隆以绑定到新对象，这样数据就不会在所有div之间共享。我仍在尝试解析您的代码，我将尝试编写一个带有代码更改的答案扫描您的调试或控制台。注销

quotes

数组？我无法退出测试。如果你能解决这个问题，我可能会修改代码来修复。尝试将您的循环报价按照分解为它自己的组件。vue绑定了哪些数据，以及为什么数组中的每个元素都没有显示，这可能会更清楚。很抱歉，我没有在这里用引号中的调试更新问题，结果就在它上面，正好覆盖了以前的数组，当我添加一些内容时，我想所有以前的div仍然绑定到一个模型。您需要执行一些克隆以绑定到新对象，这样数据就不会在所有div之间共享。我仍在尝试解析您的代码，我将尝试编写一个带有代码更改的答案扫描您的调试或控制台。注销

quotes

数组？我无法退出测试。如果你能解决这个问题，我可能会修改代码来修复。尝试将您的循环报价按照分解为它自己的组件。vue绑定的数据以及数组中的每个元素为何未显示可能更清楚。很抱歉，我不在这里，我用引号中的调试更新了问题，结果就在它上面，刚好在数组上方，当我添加一些仍然没有解决的问题时，问题仍然不知道为什么：/still not solved，问题仍然不清楚原因：/