Résoudre l'erreur Vue : impossible d'utiliser correctement l'attribut d'écoute de la montre

Solution à l'erreur Vue : impossible d'utiliser correctement l'attribut d'écoute de la montre

Vue est un framework de développement front-end très populaire, mais lors de l'utilisation, nous pouvons rencontrer des erreurs et des erreurs. L’un des problèmes les plus courants est l’incapacité d’utiliser correctement watch pour surveiller les propriétés. Dans cet article, nous décrirons les causes de ce problème et proposerons quelques solutions.

Tout d'abord, regardons un exemple de code simple :

<template>
  <div>
    <input v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  watch: {
    message: {
      handler: function (newValue, oldValue) {
        console.log('message changed')
      }
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous avons défini une propriété de message dans le composant Vue et l'avons liée à un élément d'entrée à l'aide de v-model. Dans le même temps, nous utilisons également watch pour surveiller les modifications apportées à l'attribut du message.

Cependant, lorsque nous essayons d'exécuter ce code dans le navigateur, nous pouvons rencontrer le message d'erreur suivant : [Vue warn] : $watch n'est pas une fonction.

La raison de cette erreur est que la méthode d'écriture de l'attribut watch a changé dans la version Vue 2.0. Dans les versions antérieures à Vue 2.0, nous pouvions définir directement une fonction de traitement dans l'attribut watch pour écouter les changements dans l'attribut. Mais dans Vue 2.0 et les versions ultérieures, nous devons utiliser une nouvelle façon d'écrire pour définir l'attribut watch.

La façon de résoudre cette erreur est de définir l'attribut de la montre selon la nouvelle méthode d'écriture. Modifiez l'exemple de code ci-dessus comme suit :

<template>
  <div>
    <input v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log('message changed')
    }
  }
}
</script>

Dans la nouvelle méthode d'écriture, nous n'utilisons plus l'attribut handler pour définir la fonction de traitement, mais écrivons directement la fonction dans l'attribut watch.

Lorsque nous exécutons le code modifié dans le navigateur, nous constaterons que l'attribut watch peut surveiller correctement les modifications dans l'attribut message, et aucune erreur n'apparaîtra à nouveau.

Pour résumer, la façon de résoudre le problème selon lequel Vue ne peut pas utiliser correctement l'attribut d'écoute watch est d'appliquer la méthode d'écriture après Vue 2.0 au code. Autrement dit, écrivez la fonction de traitement directement dans l'attribut watch sans utiliser l'attribut handler.

J'espère que le contenu de cet article pourra vous aider à résoudre ce problème et à mieux utiliser Vue pour développer des applications front-end. Si vous avez d'autres questions connexes, veuillez laisser un message pour en discuter. Bonne programmation !

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!