Question

所以基本上我有两个组件，我使用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>

每次我添加一个引号（文本）我调用另一个组件中的事件，该事件应该将对象卸载到数组中。

组件二（带div）

<template>
    <div class="row">
        <div class="col-md-3" v-for="(quote,$index) in quotes" @click="deleteQuote($index)">
            <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(quote);
            });
        }
    }

</script>

你们可以看到，这里我有一个unshift将对象添加到数组的开头，而在html上面我做一个v-for迭代数组，一切都很好，但显示的是div很奇怪，这就是行为：

我在textarea上放置'some Text'，一切都很好我得到一个带有'some Text 的div

然后我在textarea上放置'some Text2'，并且'some Text2'覆盖了前一个对象，我将所有div显示为最后一个输入的文本，所以想象在我的第9个div中我输入'abc'all其他8个div获得'abc'，我希望你们能理解这个问题。

Ps：console.log（quote）显示我想要取消移动的对象，它正是我要传递给数组的那个对象，所以那里没有问题。

谢谢你们，

抱歉长篇

报价日志：

首先添加：

Array[1]0: Object__ob__: Observerid: 2text: "second"__proto__: Object1: Object__ob__: Observerid: 2text: "second"__proto__: Object__ob__: Observerlength: 2__proto__: Array

第二次添加：

数组[1] 0：Object__ob__：Observerid：2text：“second” proto ：Object1：Object__ob__：Observerid：2text：“second” proto ：Object__ob__：Observerlength ：2__proto__：数组

Answer 1

问题是您需要一个唯一标识每个元素的键。 https://vuejs.org/v2/guide/list.html#key 我建议添加这个

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用作您的密钥，因为它会根据引号在数组中的位置而更改。

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

1 个答案: