VueJS récupère les données en tant qu'objet

Question

Voici un composant VueJS:

<template>
  <a @click="log">click me<a>
</template>

<script>
  export default {
    data() {
      return {
        a: "a",
        b: "something",
        foo: { bar: "baz" },
        // etc.
      }
    },
    methods: {
      log() {
        // console.log( data ); 
        // ???
      }
    }
  }
</script>

Je veux accéder à data à partir de la fonction log et l'obtenir en tant qu'objet (comme dans sa déclaration). Je sais que je peux obtenir des données comme celle-ci:

log() {
  console.log( this.a );
  console.log( this.b );
  console.log( this.foo );
}

Mais ce que je veux, c'est l'ensemble des données en tant qu'objet (parce que je veux envoyer les données via un événement à un composant parent).

Existe-t-il un moyen d'obtenir l'intégralité de l'objet de données dans une méthode d'un composant?

Answer 1

Vous pouvez accéder à l'objet de données du composant actuel à l'aide de this.$data.

Référence: Lien

La fonction de journal devrait donc être comme:

log() {
  console.log(this.$data.a);
  console.log(this.$data.b);
  console.log(this.$data.foo);
}