Mengapa kotak semak vue mengedit 0?

vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna. Satu komponen biasa ialah kotak semak, yang membolehkan pengguna memilih antara berbilang pilihan. Walau bagaimanapun, kadangkala, apabila kita mengedit nilai kotak semak, ia menjadi 0, yang bukan seperti yang kita harapkan. Artikel ini akan membincangkan punca masalah ini dan cara menyelesaikannya.

Pertama, mari kita lihat penggunaan asas kotak pilihan dalam vue. Kita boleh menggunakan arahan model-v untuk mengikat nilai kotak pilihan:

<template>
  <div>
    <input type="checkbox" v-model="checked" />
    {{ checked }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

Dalam contoh di atas, kami mengikat nilai kotak pilihan kepada atribut yang ditandakan. Apabila kotak semak ditandakan, nilai yang disemak adalah benar, jika tidak ia adalah palsu. Kami boleh memaparkan nilai yang disemak dalam templat untuk mengesahkan bahawa kotak pilihan berfungsi seperti yang kami harapkan.

Sekarang, kami cuba mengedit nilai kotak pilihan. Sebagai contoh, apabila pengguna mengklik pada kotak pilihan, kami mahu menetapkan nilainya kepada 1 dan bukannya benar. Kita boleh mencapainya dengan mendengar peristiwa perubahan kotak pilihan:

<template>
  <div>
    <input type="checkbox" v-model="checked" @change="handleChange" />
    {{ checked }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  },
  methods: {
    handleChange() {
      if (this.checked) {
        this.checked = 1
      } else {
        this.checked = 0
      }
    }
  }
}
</script>

Dalam kod di atas, kami telah menambah pendengar acara perubahan pada kotak pilihan, apabila nilai kotak semak berubah, kaedah handleChange akan menjadi dipanggil. Dalam kaedah ini, kami menetapkan nilai yang disemak kepada 1 atau 0 masing-masing untuk mencapai keperluan kami.

Walau bagaimanapun, apabila kita menjalankan kod di atas, kita akan mendapati bahawa nilai kotak semak menjadi 0 dan bukannya 1. Ini kerana Vue menghuraikan nilai kotak semak sebagai rentetan, bukan nilai angka. Oleh itu, apabila menetapkan nilai 1 untuk diperiksa, ia dihuraikan sebagai rentetan "1", bukan nilai 1. Apabila nilai kotak semak ditukar kembali kepada nilai angka, ia menjadi 0 kerana "1" ditafsirkan sebagai nilai bukan benar dan ialah 0 apabila ditukar kepada nilai angka.

Jadi, bagaimana kita hendak menyelesaikan masalah ini? Satu cara ialah menggunakan kaedah parseInt untuk menukar rentetan kepada nilai angka:

<template>
  <div>
    <input type="checkbox" v-model="checked" @change="handleChange" />
    {{ checked }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  },
  methods: {
    handleChange() {
      if (this.checked) {
        this.checked = parseInt(1)
      } else {
        this.checked = parseInt(0)
      }
    }
  }
}
</script>

Dalam kod di atas, kami telah menggunakan kaedah parseInt untuk menukar nilai angka 1 dan 0 kepada jenis angka. Dengan cara ini, apabila nilai kotak semak ditukar kembali kepada jenis angka, ia akan kekal 1 dan bukannya 0.

Penyelesaian lain ialah menggunakan jenis Nombor, yang boleh menukar rentetan kepada nilai angka:

<template>
  <div>
    <input type="checkbox" v-model="checked" @change="handleChange" />
    {{ checked }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  },
  methods: {
    handleChange() {
      if (this.checked) {
        this.checked = Number(1)
      } else {
        this.checked = Number(0)
      }
    }
  }
}
</script>

Dalam kod di atas, kami telah menggunakan kaedah Nombor untuk menukar rentetan kepada angka taip . Dengan cara ini, apabila nilai kotak semak ditukar kembali kepada jenis angka, ia akan kekal 1 dan bukannya 0.

Untuk meringkaskan, apabila kita mengedit nilai kotak pilihan dalam vue, kita perlu ambil perhatian bahawa ia dihuraikan sebagai rentetan, bukan nilai angka. Untuk mengelakkan masalah ini, anda boleh menggunakan kaedah parseInt atau Number untuk menukar rentetan kepada jenis angka. Dengan cara ini, kita boleh berjaya mengedit nilai kotak semak!

Atas ialah kandungan terperinci Mengapa kotak semak vue mengedit 0?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!