所以基本上我有2个组件,我正在使用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>


如你们所见,在这里,我具有将对象添加到数组开头的不变性,而在html上方,我做了一个v-for来遍历数组,一切都很好,但是显示的div很奇怪,这是行为:

我在文本区域上放置了“一些文本”,一切正常,我得到了一个带有“一些文本”的div

然后我在文本区域上放置“一些Text2”,并且该“某些Text2”覆盖上一个对象,我将显示所有div以及最后输入的文本,因此,请想象在我的第9个div中我输入“ abc”所有其他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


第二添加:

Array [1] 0:Object__ob__:Observerid:2text:“ second” proto:Object1:Object__ob__:Observerid:2text:“ second” proto:Object__ob__:Observerlength:2__proto__:Array

最佳答案

问题是您需要有一个唯一标识每个元素的密钥。 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作为键,因为id会根据引用在数组中的位置而变化。

关于javascript - 对象数据覆盖所有先前的数据,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42911403/

10-12 12:32
查看更多