Vuejs strange behavior when a list of checkboxes are updated

Question

Well, it's not easy to explain.

I have a list of checkboxes generated from reactive data . When you check one of the checkboxes, one of the entries of the reactive data is deleted.

The list is then updated .

The next checkbox is then placed under the mouse cursor and is "activated" by releasing the mouse button . This behavior is unwanted, can you see a way to avoid this?

Here is the code to illustrate this case:

<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="checkbox"
          v-on:change="toggle">
        {{ todo.text }}
      </label>
    </li>
  </ol>
</div>

Script part:

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript" },
      { text: "Learn Vue" },
      { text: "Play around in JSFiddle" },
      { text: "Build something awesome" }
    ]
  },
  methods: {
    toggle: function(){
        this.todos.splice(1,1)
    }
  }
})

Also a live test: https://jsfiddle.net/m10jyLut/7/

I don't know if my design is correct. I would like to avoid a too hackneyed solution.

Thank you very much for your guess.

Answer 1

I added "key" to v-for, which is always a good idea, and passing todo.id with toggle().

<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos" :key="todo.id">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo.id)">
        {{ todo.text }}
      </label>
    </li>
  </ol>
</div>

Your script tag should be like this:

new Vue({
  el: "#app",
  data: {
    todos: [
      { id: Math.random() * 100000, text: "Learn JavaScript",  },
      { id: Math.random() * 100000, text: "Learn Vue", },
      { id: Math.random() * 100000, text: "Play around in JSFiddle", },
      { id: Math.random() * 100000, text: "Build something awesome", }
    ]
  },
  methods: {
    toggle(id) {
        this.todos = this.todos.filter(todo => todo.id !== id)
    }
  }
})

In Vue.js, it's always a good idea to add key to v-for, and working with ids for rendering operations.