在vuejs中呈现具有重复值的数组

Rendering array with duplicate values in vuejs

本文关键字：数组 vuejs      更新时间：2023-09-26

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
  • a
  • abc

显示器：

  • a
  • abc

若我重构并使用对象to而不是主值，那个么当它们有重复的对象时，就可以按预期工作了。

jsfiddle

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

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>

相关文章：