javascript - 为什么我的数组会重叠

Question

我有一个简单的项目，我试图使用 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 个条目:文本:“abcdef”，数组中的所有条目在文本中都有这个值，我所有的 div 都有 abcdef 的值，发生了什么:S

Answer 1

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>

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

您需要发送对象的副本:

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