use vue and v-model with a css specific checkbox

Question

I am migrating some jQuery code to Vue. We have a part that is like the following:

<td>
  <p>
    <input class="select-one checkbox-default-input" type="checkbox" :value="placement.id" v-model="checkedPlacements">
    <label for="select-clicks" class="checkbox-default" @click="setValue"></label>
   </p>
 </td>

ie I am using a label to adjust the UI of an input similar to this: Pure CSS Checkbox Image replacement

how would I associate my v-model with the correct input value?

Vue have great documentation, I recommend reading the following: https://vuejs.org/v2/guide/forms.html#Checkbox — GustavMahler, Aug 27 '18 at 22:31

score 2 · Answer 1 · edited Jul 15 '22 at 04:53

<td>
  <p>
    <input id="select-clicks" class="select-one checkbox-default-input" type="checkbox" :checked="placement.id" @input="toggleCheckbox">
    <label for="select-clicks" class="checkbox-default"></label>
  </p>
</td>

I have added an id attribute to the input tag which corresponds to the label for attribute.

:checked="placement.id" - Here placement.id should correspond to a boolean value stored on your vue component's data property.

@input="toggleCheckbox" - this should be a simple method on your vue component that toggles the value. Something like this:

toggleCheckbox() {
    this.placement.id = !this.placement.id;
},

You can then apply conditional classes to the element using the :class bindings. You can read more about them here: https://v2.vuejs.org/v2/guide/class-and-style.html

score 1 · Accepted Answer · edited Jul 16 '22 at 02:15

As @GustavMahler pointed out, Vue Guide: Form Input binding shows how to reach the goal.

@GustavMahler already provided the solution by v-bind and v-on (actually v-model is one syntax sugar which does similar things. one simple explanation at here),

Below is the steps uses v-model:

add attr=id for the checkbox, so label know which checkbox it links.
v-model to one data property which is one Array. (if default value is one Boolean, the value will be one Boolean value (true/false), it ignores the value it binds (please check the third checkbox).)
click the checkbox(label), it will toggle the values to the array.

Below is one demo (the CSS part is copied from the link in the question).

new Vue({
  el: '#app',
  data() {
    return {
      placement: {id: 'value1'},
      checkedPlacements: [], // default is one Array
      checkedPlacement: false // default is one Boolean
    }
  },
  watch: {
    checkedPlacements: function (newVal) {
      console.log('changed', newVal)
    },
    checkedPlacement: function (newVal) {
      console.log('changed', newVal)
    }
  }
})

input[type=checkbox] {
display:none;
}
 
input[type=checkbox] + label
{
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
   <p>
    <input class="select-one checkbox-default-input" type="checkbox" :value="placement.id" v-model="checkedPlacements" id="select-clicks1">
    <label for="select-clicks1" class="checkbox-default"></label>
    <input class="select-one checkbox-default-input" type="checkbox" :value="'value2'" v-model="checkedPlacements" id="select-clicks2">
    <label for="select-clicks2" class="checkbox-default"></label>
   </p>
   <p>
    <input class="select-one checkbox-default-input" type="checkbox" :value="placement.id" v-model="checkedPlacement" id="select-clicks3">
    <label for="select-clicks3" class="checkbox-default"></label>
   </p>
</div>

use vue and v-model with a css specific checkbox

2 Answers2