web-dev-qa-db-fra.com

Pourquoi existe-t-il un observateur au lieu de mon tableau?

Mon composant Vue comprend, par exemple, ce code:

<script>
export default {
  data() {
    return {
      sailNames: []
    }
  },
  methods: {
    showName: function(e) { // [3] called by @click event from DOM
      console.log(this.sailNames); // [4] shows: [__ob__: Observer]
    },
    getJsonData() { // [1] called on created() hook
      $.getJSON("./src/res/sails.json", function(data) {
        const sailNames = [];
        $.each(data, function(i, names) {
          sailNames.Push(names);
        });
        this.sailNames = sailNames;
        console.log(this.sailNames);
        console.log(sailNames); // [2] both logs give the same output
      });
    }
  }
}
(...)

Je me demande pourquoi je reçois ce [__ob__: Observer] lors de la journalisation de l'état au point [4]. Comme vous le voyez, le tableau est défini dans la section data, puis il obtient les valeurs d'une variable locale et vérifie: les variables locales et globales sont identiques (point [2]).

Ensuite, lorsqu'un utilisateur clique sur un élément auquel la méthode showName a été affectée (pt. [3]), on peut s'attendre à voir le même résultat que dans pt. [2], mais [__ob__: Observer] apparaît à la place dans la console.

Que se passe-t-il là-bas? Comment dois-je appeler le tableau pour obtenir ses valeurs?

javascriptvue.jsvuejs2
4
AbreQueVoy

Une expression de fonction de flèche a une syntaxe plus courte qu'une expression de fonction et ne possède pas ses propres éléments this, arguments, super ou new.target. Essayez de remplacer l'expression de la fonction par des fonctions de flèche.

<script>
export default {
  data() {
    return {
      sailNames: []
    }
  },
  methods: {
    showName(e){  
      console.log(this.sailNames); 
    },
    getJsonData() { 
      $.getJSON("./src/res/sails.json", (data) => {
        const sailNames = [];
        $.each(data, function(i, names) {
          sailNames.Push(names);
        });
        this.sailNames = sailNames;
      });
    }
  }
}
</script>
1
SaJed