Maison > Article > interface Web > 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.
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.
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!