vue のチェックボックスが 0 に編集されるのはなぜですか?

vue は、ユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。共通コンポーネントの 1 つはチェックボックスです。これを使用すると、ユーザーは複数のオプションから選択できます。ただし、チェックボックスの値を編集すると、期待した値と異なる 0 になる場合があります。この記事では、この問題の原因とその解決方法について説明します。

まず、vue のチェックボックスの基本的な使い方を見てみましょう。 v-model ディレクティブを使用して、チェックボックスの値をバインドできます。

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

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

上記の例では、チェックボックスの値を selected 属性にバインドします。チェックボックスがチェックされている場合、checked の値は true になり、それ以外の場合は false になります。チェックされた値をテンプレートに表示して、チェックボックスが期待どおりに機能することを確認できます。

ここで、チェックボックスの値を編集してみます。たとえば、ユーザーがチェックボックスをクリックしたとき、その値を true ではなく 1 に設定したいとします。チェックボックスの変更イベントをリッスンすることでこれを実現できます。

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

上記のコードでは、チェックボックスに変更イベント リスナーを追加しました。チェックボックスの値が変更されると、handleChange メソッドが呼び出されます。 。このメソッドでは、ニーズを達成するためにチェックされた値をそれぞれ 1 または 0 に設定します。

ただし、上記のコードを実行すると、チェック ボックスの値が 1 ではなく 0 になることがわかります。これは、Vue がチェックボックスの値を数値ではなく文字列として解析するためです。したがって、checked に値 1 を割り当てると、値 1 ではなく文字列「1」として解析されます。チェックボックスの値を数値に戻すと0になります。「1」は非真値として解釈され、数値に換算すると0となります。

それでは、この問題をどのように解決すればよいでしょうか? 1 つの方法は、parseInt メソッドを使用して文字列を数値に変換することです。

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

上記のコードでは、parseInt メソッドを使用して数値 1 と 0 を数値型に変換しました。こうすることで、チェックボックスの値が数値型に変換されても、0 ではなく 1 のままになります。

もう 1 つの解決策は、文字列を数値に変換できる Number 型を使用することです。

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

上記のコードでは、Number メソッドを使用して文字列を数値型に変換します。 。こうすることで、チェックボックスの値が数値型に変換されても、0 ではなく 1 のままになります。

要約すると、vue でチェックボックスの値を編集する場合、値は数値ではなく文字列として解析されることに注意する必要があります。この問題を回避するには、parseInt メソッドまたは Number メソッドを使用して文字列を数値型に変換します。このようにして、チェックボックスの値を正常に編集できます。

以上がvue のチェックボックスが 0 に編集されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。