Maison > interface Web > Questions et réponses frontales > Pourquoi la case à cocher vue modifie-t-elle 0 ?

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

WBOY
Libérer: 2023-05-24 09:29:07
original
535 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal