использовать vue и v-модель с флажком css

Question

Я перенесу некоторый код jQuery в Vue. У нас есть часть, которая выглядит следующим образом:

<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>

т.е. я использую метку для настройки пользовательского интерфейса ввода, подобного этому: Флажок Pure CSS Замена изображения

как бы я связал свою v-модель с правильным входным значением?

Answer 1

Как указал @GustavMahler, Руководство по Vue: привязка ввода формы показывает, как достичь цели.

@ GustavMahler уже предоставил решение v-bind и v-on (фактически v-модель - это один синтаксический сахар, который делает подобные вещи. одно простое объяснение здесь ),

Ниже приведены инструкции по использованию v-model:

1. добавьте attr = id для флажка, чтобы метка знала, на какой флажок он ссылается.

2. v-модель для одного свойства данных, которое равно одному Array . (если значение по умолчанию - один Boolean , значение будет одним логическим значением (true / false), оно игнорирует значение, которое оно связывает (пожалуйста, отметьте третий флажок).)

3. установите флажок (метку), он переключит значения в массив.

Ниже приведена одна демонстрация (часть CSS скопирована из ссылки в вопросе).

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>

Answer 2

<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>

Я добавил атрибут id во входной тег, который соответствует атрибуту метки for.

:checked="placement.id" - Здесь placement.id должно соответствовать логическому значению, сохраненному в свойстве data компонента vue.

@input="toggleCheckbox" - это должен быть простой метод для вашего компонента vue, который переключает значение. Примерно так:

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

Затем вы можете применить условные классы к элементу, используя привязки :class. Подробнее о них можно прочитать здесь: https://vuejs.org/v2/guide/class-and-style.html