Question

＆＃13;

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

＆＃13;

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

＆＃13;

运行代码后，如果我添加重复数据，Vue只会在最后一次显示该值。

例如，

。输入：

ABC
一个
ABC

显示：

a
ABC

如果我重构并使用object而不是主值，那么它就像预期的事件那样有重复的对象。

jsfiddle

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: