在vuejs中渲染具有重复值的数组答案

【问题标题】：Rendering array with duplicate values in vuejs在vuejs中渲染具有重复值的数组
【发布时间】：2016-05-16 04:24:45
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js

【解决方案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>

【讨论】：