javascript - 为什么我的数组重叠

我有一个简单的项目，我尝试使用componenetes学习vue.js的概念，组件之间的通讯（我使用eventBus），我正在使用webkit-simple模板来解决这个问题，基本上发生的是，我有1个组件它包含一个简单的文本区域，在其中添加一些文本，该文本应显示在我的第二个组件中，这是一个模板，在该模板中，我使用插入的所有文本（如引号列表）来呈现一个数组。

组件addQuote

<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>

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

例：

第9个条目：text：“ abcdef”，数组中的所有条目在text中都具有该值，我所有的div都具有abcdef的值，发生了什么：S

最佳答案

const quoteBus = new Vue();

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

Vue.component('quotes', {
  template: '#quotes-template',
  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));
    });
  }
});

new Vue({
  el: '#app'
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<template id="addQuote-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>

<template id="quotes-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>

<div id="app">
  <add-quote></add-quote>
  <quotes></quotes>
</div>

问题是在您的this.quote组件中只有一个addQuote实例。每次将特定对象传递给quotes放入数组中。将对象放入数组时，它是按引用的。如果将同一对象多次放入数组，则仅具有对该对象内容的多个引用。数组的每个元素都是对同一组内容的引用。

您需要发送对象的副本：

quoteBus.$emit('saveQuote', Object.assign({}, this.quote));