[Vuejs]-VueJS how to use v-model with a specific element of an array?

by

0👍

I think you’re trying to use v-model wrong. v-model is used for two-way binding of your components data to be reactive to events. So, if you want to store the values of all the selected fav movies, you can do it very simply using the v-model.

<input type="checkbox" id="1" value="movie1" v-model="favorites">
<label for="movie1">Best One</label>

<input type="checkbox" id="2" value="movie2" v-model="favorites">
<label for="movie2">Okay movie</label>

    data () {
      return {
        favorites: []
      }
   },

Now the selection of each of those checkboxes will stay up-to-date with our data’s values. So if we check Best One, the value for that movie will go into the array, and if we uncheck it, the value will be popped out of that array. You can add as many as you like, and use the same piece of state from our data. It’s pretty magical that view lets us do this. Check out more great examples in the docs here

Leave a comment