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>

ie我正在使用标签来调整类似于以下内容的输入的用户界面：Pure CSS Checkbox Image replacement

如何将v模型与正确的输入值相关联？

Answer 1

<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对应于存储在vue组件的data属性中的布尔值。

@input="toggleCheckbox"-这是在vue组件上切换值的简单方法。像这样：

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

然后可以使用:class绑定将条件类应用于元素。您可以在这里阅读有关它们的更多信息：https://vuejs.org/v2/guide/class-and-style.html

Answer 2

正如@GustavMahler指出的那样，Vue Guide: Form Input binding展示了如何实现目标。

@GustavMahler已经通过() -> Int和getNum { getTen() }提供了解决方案（实际上v-model是一种语法糖，其功能类似。one simple explanation at here），

以下是使用v-bind的步骤：

为复选框添加attr = id，因此标签知道链接的复选框。
v模型建模为一个数据属性，即一个 Array 。（如果默认值为一个 Boolean ，则该值将为一个布尔值（true / false），它将忽略它绑定的值（请选中第三个复选框）。）
单击复选框（标签），它将把值切换到数组。

下面是一个演示（CSS部分是从问题链接中复制的。）

v-on

v-model

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

将vue和v-model与CSS特定的复选框一起使用

2 个答案: