javascript - 在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>