l'événement vue ne trouve pas de méthode

Lors de l'utilisation de Vue, nous rencontrons souvent un problème : les méthodes personnalisées ne peuvent pas être appelées par les instances de Vue, ce qui empêche la page de répondre aux événements interactifs tels que les clics. Ce problème semble simple, mais en réalité il dérange de nombreux développeurs. Cet article expliquera en détail les raisons et les solutions pour lesquelles les événements Vue ne trouvent pas de méthodes.

Description du problème

Lors de la définition de méthodes dans les composants Vue, elles doivent souvent être définies dans l'objet méthodes. Par exemple :

Vue.component('my-component', {
  template: '<button @click="handleClick">Click me</button>',
  methods: {
    handleClick() {
      alert('clicked');
    }
  }
});

Le code ci-dessus définit un composant Vue nommé "my-component", qui contient un bouton Lorsque vous cliquez sur le bouton, la méthode handleClick sera appelée et une boîte de dialogue apparaîtra. . Cependant, dans le développement réel, nous rencontrons parfois une telle situation : après avoir cliqué sur le bouton, aucune boîte de dialogue ne s'affiche et il n'y a pas de réponse. En effet, Vue ne peut pas trouver la méthode et ne peut pas la lier à l'événement.

Solution

Il existe de nombreuses raisons à ce problème, mais nous pouvons commencer à trouver des solutions sous les aspects suivants.

1. Vérifiez le nom

Tout d'abord, nous devons vérifier si la méthode est correctement nommée. Si le nom de la méthode est mal orthographié ou avec une mauvaise majuscule, Vue ne pourra pas trouver la méthode et ne pourra pas l'exécuter. Dans le code ci-dessous, le nom de la méthode doit être handleClick, et non handleclick ou HandleClick.

Vue.component('my-component', {
  template: '<button @click="handleClick">Click me</button>',
  methods: {
    handleClick() {
      alert('clicked');
    }
  }
});

2. Vérifiez la portée du composant

Les composants Vue ont un concept de portée, c'est-à-dire que les méthodes définies dans un composant ne peuvent être appelées que par ce composant. Si nous définissons une méthode dans un composant, mais appelons la méthode dans un autre composant ou instance racine, Vue ne trouvera pas la méthode. Par conséquent, lorsque nous utilisons des composants Vue, nous devons clairement comprendre la portée de chaque composant pour garantir que les méthodes sont appelées correctement.

Par exemple, dans le code ci-dessous, nous définissons deux composants, mon-composant1 et mon-composant2. Ils contiennent tous un bouton, et lorsque l'on clique sur le bouton, la méthode handleClick est appelée. Cependant, lorsque nous déclarons à la fois my-component1 et my-component2 dans l'instance racine, tous les boutons ne peuvent pas répondre correctement aux événements de clic.

Vue.component('my-component1', {
  template: '<button @click="handleClick">Click me</button>',
  methods: {
    handleClick() {
      alert('clicked by component 1');
    }
  }
});

Vue.component('my-component2', {
  template: '<button @click="handleClick">Click me</button>',
  methods: {
    handleClick() {
      alert('clicked by component 2');
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    handleClick() {
      alert('clicked by root');
    }
  }
});

La raison est que chaque composant de Vue a sa propre portée et que les méthodes définies dans l'instance racine ne peuvent être appelées que par l'instance racine et ne peuvent pas être appelées par des sous-composants. Si nous voulons appeler une méthode dans un composant enfant, la méthode doit être définie dans le composant enfant correspondant, et non dans l'instance racine.

new Vue({
  el: '#app',
  components: {
    'my-component1': {
      template: '<button @click="handleClick">Click me</button>',
      methods: {
        handleClick() {
          alert('clicked by component 1');
        }
      }
    },
    'my-component2': {
      template: '<button @click="handleClick">Click me</button>',
      methods: {
        handleClick() {
          alert('clicked by component 2');
        }
      }
    }
  }
});

3. Vérifiez la grammaire dans le modèle

Enfin, nous devrions également vérifier l'exactitude de la grammaire dans le modèle. Il existe de nombreuses syntaxes spéciales dans les modèles Vue, telles que des instructions, des expressions, etc. Si vous écrivez ces syntaxes de manière incorrecte, Vue ne pourra pas trouver la méthode. Par exemple, dans le code suivant, nous avons écrit @click au lieu de @ckick, ce qui fait que la méthode n'est pas correctement liée à l'événement click.

Vue.component('my-component', {
  template: '<button @ckick="handleClick">Click me</button>',
  methods: {
    handleClick() {
      alert('clicked');
    }
  }
});

Il est à noter que Vue ne fournit pas de moyen de savoir si l'événement est correctement lié à la méthode. Cela est principalement dû au fait que la liaison d'événement de Vue est basée sur des chaînes et que le compilateur ne signalera pas d'erreur lorsque la chaîne est mal orthographiée, nous devons donc vérifier soigneusement le code pour garantir l'exactitude de la syntaxe.

Summary

L'événement Vue ne peut pas trouver la méthode est un problème courant, généralement pour trois raisons : erreur de nom, erreur de portée, erreur de syntaxe du modèle. Pendant le processus d'écriture du code, nous devons prêter attention aux points ci-dessus pour garantir l'exactitude du code et éviter de tels problèmes.

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!