[Vuejs]-V-model updating all Instances

by

0👍

The issue here is that you are using the same variable tempval as v-model for all inputs, so once tempval changes it gets updated on all inputs.

One way of fixing this is, if you want to have all inputs active at the same time, is to remove the v-model and pass the event to the changeVale method:

<input
        type="text"
        v-on:change="changeVal(index, $event);"
        v-bind:id="'empty' + index"
      />

And then in the changeVal method:

changeVal(index, event) {
  this.gameInput[index] = event.target.value;
}

I tried this approach with v-on:change and I didn’t like it too much since it doesn’t trigger instantly. It gets triggered when you change the focus or press enter.

I prefer to use keyup:

    <input
        type="text"
        v-on:keyup="changeVal(index, $event);"
        v-bind:id="'empty' + index"
      />

Leave a comment