所以基本上我有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/