Comment résoudre l'erreur « [Vue warn] : v-model n'est pas pris en charge sur »

Comment résoudre l'erreur « [Vue warn] : v-model is not supported on »

Pendant le processus de développement avec Vue, nous pouvons parfois rencontrer un message d'erreur : « Vue warn : v-model is not supporté » sur" sur". Ce message d'erreur apparaît généralement lors de la liaison d'éléments à l'aide de la directive v-model, et nous rappelle également qu'il peut apparaître parce que nous essayons de lier un élément non pris en charge.

Alors, comment devrions-nous résoudre cette erreur lorsque nous la rencontrons ? Ci-dessous, nous donnerons quelques scénarios courants et les solutions correspondantes.

1. Lier des composants personnalisés
   Lorsque nous utilisons la directive v-model pour lier un composant personnalisé, Vue transmettra par défaut la valeur de v-model comme événements "prop" et "input" du composant. Par conséquent, nous devons recevoir la valeur de la liaison v-model via "props" dans le composant personnalisé et déclencher manuellement l'événement "input" dans le composant pour obtenir une liaison bidirectionnelle.

Ce qui suit est un exemple de code pour un composant personnalisé :

<template>
  <div>
    <input :value="value" @input="updateValue($event.target.value)" />
  </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    updateValue(value) {
      this.$emit('input', value);
    }
  }
}
</script>

Dans le code ci-dessus, nous recevons la valeur liée par v-model via des accessoires et déclenchons l'événement d'entrée via la méthode updateValue pour obtenir une liaison bidirectionnelle.

2. Liaison d'éléments HTML natifs
   Si nous utilisons v-model pour lier des éléments HTML natifs, il n'y a généralement aucun problème. Mais lorsque nous essayons de lier certains éléments spéciaux, tels que
   , , etc., l'erreur ci-dessus se produit.

La raison de cette erreur est que la directive v-model est en fait du sucre de syntaxe, qui est converti en interne en un attribut de valeur et un événement d'entrée pour obtenir une liaison bidirectionnelle. Ces éléments spéciaux ne prennent pas en charge les attributs de valeur et les événements d'entrée, une erreur sera donc signalée.

La solution à ce problème est très simple. Il suffit de remplacer la directive v-model par : value et @input pour lier respectivement l'attribut value et l'événement input. Voici un exemple de code :

<template>
  <div>
    <span :value="content" @input="updateContent($event.target.value)"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    updateContent(value) {
      this.content = value;
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons : value et @input pour remplacer la directive v-model, afin que l'attribut value et l'événement d'entrée de l'élément spécial puissent être correctement liés pour obtenir deux- manière contraignante.

Résumé :
Lorsque nous rencontrons l'erreur "[Vue warn] : v-model is not supported on", nous devons d'abord clarifier la cause de l'erreur. Si vous liez un composant personnalisé, vous devez gérer manuellement la valeur et l'événement de v-model dans le composant ; si vous liez un élément spécial, vous devez le remplacer par :value et @input pour obtenir une liaison bidirectionnelle. .

J'espère que grâce à l'introduction de cet article, les lecteurs pourront mieux comprendre et résoudre cette erreur, et pourront effectuer des opérations de liaison bidirectionnelles plus facilement dans le développement de Vue.

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!