Rendering array with duplicate values in 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>

After run the code, if I add the duplicated data, the Vue only display the the value once in the last.

for example. type:

abc
a
abc

display:

a
abc

If I refactor and use object to instead of primary value, it's work as expected event they have duplicated object.

jsfiddle

Stas Makarov · Accepted Answer · 2016-05-16 04:40:48Z

3

You need to use 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>

answered May 16, 2016 at 4:40

Stas Makarov

7267 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rendering array with duplicate values in vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related