Соответствующая двусторонняя привязка для флажков в 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 для отслеживания изменений в флажке: свойство selected и изменение атрибутов данных в соответствии с этим, но, похоже, это односторонняя привязка и в консоли Vue значения обновляются только при обновлении sh панели VUE.

Есть ли лучший способ добиться двухстороннего связывания в этом конкретном сценарии?

Answer 1

Вы можете добиться этого, просто обновив свой шаблон, например:

<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», флажок будет установлен по умолчанию, как показано в демонстрации ниже.

DEMO:

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>

Answer 2

Мое любимое решение - создать компонент для достижения этой цели: Мой флажок. 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>