渲染陣列重複值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>