我有一个简单的项目,我正在尝试使用组件学习vue.js的概念,组件之间的通信(我使用eventBus)我使用webkit-simple模板来解决这个问题,基本上会发生什么,是我有一个组件,包含一个简单的textarea,我在其中添加一些文本,该文本应该显示在我的第二个组件中,这是一个模板,我在其中呈现一个数组,其中包含我插入的所有文本,如引号列表。
组件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:&#34; abcdef&#34;,数组中的所有条目在文本中都有此值,我的所有div都具有abcdef的值,发生了什么:S
答案 0 :(得分: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>
问题是this.quote
组件中只有addQuote
的一个实例。您将该特定对象传递给quotes
,以便每次都放入数组中。将对象放入数组时,它是按引用的。如果将多个相同的对象放入一个数组中,则只需对该对象的内容进行多次引用。数组的每个元素都是对同一组内容的引用。
您需要发送该对象的副本:
quoteBus.$emit('saveQuote', Object.assign({}, this.quote));