CODEWITHSUNDEEP
javascriptvue.js
caoglish
caoglish

Reputation: 1361

Rendering array with duplicate values in vuejs

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:

display:

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

jsfiddle

Upvotes: 2

Views: 3091

Answers (1)

Stas Makarov
Stas Makarov

Reputation: 726

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>

Upvotes: 3

Related Questions