Vue JS中复选框的适当两种方式绑定

Question

我有来自 MySQL 数据库的数据，格式为“1”和“0”，代表布尔值 true 和 false。这些值在 vue 组件中按以下方式设置：

    data(){
    return {
    form : {
         attribute_1 : "1", //attribute 1 is true
         attribute_2 : "0", //attribute 2 is false
         attribute_3 : "1", //attribute 3 is true
          }
        }
       }

为了保持双向绑定，我目前使用的计算属性如下：

 attribute1: {
            get(){
                return this.form.attribute_1 == "1" ? true : false ;
            },
            set(newValue){
                this.form.attribute_1 = newValue ? "1" : "0";
            }
        },
 attribute2: {
            get(){
                return this.form.attribute_2 == "1" ? true : false ;
            },
            set(newValue){
                this.form.attribute_2 = newValue ? "1" : "0";
            }
        }, ...

这些计算属性以下列方式连接到 HTML 代码。

<input type="checkbox"  checked v-model="attribute1">
<input type="checkbox"  checked v-model="attribute2">

这对于 VUE 中的双向绑定非常有效。但是代码中有严重的重复。

我想到了另一种方法，使用@change 事件来跟踪复选框中的更改：checked 属性并根据它更改数据属性，但它似乎是一种绑定方式，并且在 Vue 控制台中的值仅在以下情况下更新我刷新了 VUE 面板。

在这种特殊情况下，有没有更好的方法来实现双向绑定？

Answer 1

我最喜欢的解决方案是创建组件来实现这一点：
我的 Checkbox.vue 组件：

<template>
    <input type="checkbox" :checked="isChecked" @change="change" />
</template>

<script>
export default {
    props: {
        value: {}
    },
    computed: {
        isChecked() {
            return this.value === "1" || this.value === true;
        }
    },
    methods: {
        change(e) {
            this.$emit("input", e.target.checked ? "1" : "0");
        }
    }
};
</script>

并在其他组件中使用它：

<template>
    <div>
        <Checkbox v-model="isChecked" />
    </div>
</template>

<script>
import Checkbox from "./Checkbox";
export default {
    components: {
        Checkbox
    },
    data: () => ({
        isChecked: "1"
    })
};
</script>

Answer 2

您可以通过简单地更新您的模板来实现这一点：

<input type="checkbox" v-model="form.attribute1" :true-value="1" :false-value="0">
<input type="checkbox" v-model="form.attribute2" :true-value="1" :false-value="0">

就是这样。您将不再需要任何计算属性。当复选框被选中时，您将获得this.form.attribute1 值“1”或未选中时为“0”。此外，如果您将form.attribute1 值设置为“1”，则默认情况下会选中复选框，如下面的演示所示。

演示：

new Vue({
  el: '#app',
  data(){
    return {
      form: {
        attribute1: "1", //attribute 1 is true
        attribute2: "0"  //attribute 2 is false
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <input type="checkbox" v-model="form.attribute1" :true-value="1" :false-value="0">
  <label for="checkbox">{{ form.attribute1 }}</label><br/><br/>
  <input type="checkbox" v-model="form.attribute2" :true-value="1" :false-value="0">
  <label for="checkbox">{{ form.attribute2 }}</label><br/><br/>
</div>