Pourquoi la case à cocher vue modifie-t-elle 0 ?

vue est un framework JavaScript populaire pour créer des interfaces utilisateur. Un composant commun est une case à cocher, qui permet à l'utilisateur de choisir entre plusieurs options. Cependant, parfois, lorsque nous modifions la valeur de la case à cocher, elle devient 0, ce qui n'est pas ce à quoi nous nous attendions. Cet article explique la cause de ce problème et comment le résoudre.

Tout d’abord, jetons un coup d’œil à l’utilisation de base des cases à cocher dans vue. Nous pouvons utiliser la directive v-model pour lier la valeur de la case à cocher :

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

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

Dans l'exemple ci-dessus, nous lions la valeur de la case à cocher à l'attribut coché. Lorsque la case est cochée, la valeur de vérifié est vraie, sinon elle est fausse. Nous pouvons afficher la valeur cochée dans le modèle pour vérifier que la case à cocher fonctionne comme prévu.

Maintenant, nous essayons de modifier la valeur de la case à cocher. Par exemple, lorsque l'utilisateur clique sur une case à cocher, nous souhaitons définir sa valeur sur 1 au lieu de vrai. Nous pouvons y parvenir en écoutant l'événement change de la case à cocher :

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

Dans le code ci-dessus, nous avons ajouté un écouteur d'événement change sur la case à cocher, lorsque la valeur de la case à cocher change, la méthode handleChange sera appelée. Dans cette méthode, nous définissons la valeur vérifiée sur 1 ou 0 respectivement pour répondre à nos besoins.

Cependant, lorsque nous exécutons le code ci-dessus, nous constaterons que la valeur de la case à cocher devient 0 au lieu de 1. En effet, Vue analyse la valeur de la case à cocher comme une chaîne et non comme une valeur numérique. Par conséquent, lors de l'attribution de la valeur 1 à vérifié, elle est analysée comme la chaîne "1", et non comme la valeur 1. Lorsque la valeur de la case à cocher est reconvertie en valeur numérique, elle devient 0 car « 1 » est interprété comme une valeur non vraie et vaut 0 lorsqu'il est converti en valeur numérique.

Alors, comment résoudre ce problème ? Une façon consiste à utiliser la méthode parseInt pour convertir une chaîne en valeur numérique :

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

Dans le code ci-dessus, nous avons utilisé la méthode parseInt pour convertir les valeurs numériques 1 et 0 en types numériques. De cette façon, lorsque la valeur de la case à cocher est reconvertie en un type numérique, elle restera 1 au lieu de 0.

Une autre solution consiste à utiliser le type Number, qui peut convertir une chaîne en valeur numérique :

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

Dans le code ci-dessus, nous avons utilisé la méthode Number pour convertir une chaîne en un type numérique. De cette façon, lorsque la valeur de la case à cocher est reconvertie en un type numérique, elle restera 1 au lieu de 0.

Pour résumer, lorsque nous modifions la valeur de la case à cocher dans vue, nous devons noter qu'elles sont analysées sous forme de chaînes et non de valeurs numériques. Pour éviter ce problème, vous pouvez utiliser la méthode parseInt ou Number pour convertir la chaîne en type numérique. De cette façon, nous pouvons réussir à modifier la valeur de la case à cocher !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!