渲染阵列重复值vuejs

Question

new Vue({ 
 
    el: "#chat", 
 
    data: { 
 
    messages: [], 
 
    message: '' 
 
    }, 
 
    methods: { 
 
    add: function(e) { 
 
     e.preventDefault(); 
 
     this.messages.push(this.message); 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script> 
 
<form id="chat"> 
 
    <ul id='message'> 
 
    <li v-for="msg in messages">{{msg}}</li> 
 
    </ul> 
 

 
    <input v-model="message"> 
 
    <button v-on:click="add">add</button> 
 
</form>

运行代码，如果我添加的复制数据，所述的Vue只在最后一次显示的值之后。例如

。 类型：

• ABC
• 一个
• ABC

显示：

• 一个
• ABC

如果我重构并使用对象来代替主值，它会按预期的方式工作，它们具有重复的对象。

jsfiddle

Answer 1

您需要使用track-by="$index"。 （manual）

new Vue({ 
 
    el: "#chat", 
 
    data: { 
 
    messages: [], 
 
    message: '' 
 
    }, 
 
    methods: { 
 
    add: function(e) { 
 
     e.preventDefault(); 
 
     this.messages.push(this.message); 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script> 
 
<form id="chat"> 
 
    <ul id='message'> 
 
    <li v-for="msg in messages" track-by="$index">{{msg}}</li> 
 
    </ul> 
 

 
    <input v-model="message"> 
 
    <button v-on:click="add">add</button> 
 
</form>