v-bind:key directive

by nerdycap007

HTML

<div id="app">
  <h3>
    Select some people.
  </h3>
  <div v-for="(name, index) in names">
    {{name}}
    <input type="checkbox" />
  </div>
  <button @click="shuffle()">
    Shuffle
  </button>
</div>

CSS

body {
  padding: 20px;
}
button {
  margin-top: 20px
}

Vue

new Vue({
  el: "#app",
  data() {
    return {
      names: ["John", "Jane", "Jack", "Pam", "Jim", "Kim"],
    }
  },

  methods: {
    shuffle() {
      this.names.sort(() => Math.random() - 0.5);
    }
  }
})