web-dev-qa-db-fra.com

Quel est le moyen Vue d'accéder aux données à partir de méthodes?

J'ai le code suivant:

{
  data: function ()  {
    return {
      questions: [],
      sendButtonDisable: false,
    }
  },

  methods: { 
    postQuestionsContent: function () {
      var that = this;
      that.sendButtonDisable = true;
    },
  },
},

J'ai besoin de changer sendButtonDisable en vrai lorsque postQuestionsContent() est appelée. Je n'ai trouvé qu'un moyen de faire cela. avec var that = this;.

Y a-t-il une meilleure solution?

javascriptvue.jsmethods
40
Dmitry Bubnenkov

Méthodes Inside Si vous n'avez pas défini d'autre étendue à l'intérieur, vous pouvez accéder à vos données de la manière suivante:

this.sendButtonDisable = true;

mais si vous avez une portée dans la fonction alors dans vue est un usage courant d'une variable appelée vm (signifie voir le modèle) au début de la fonction, puis utilisez-la partout comme:

vm.sendButtonDisable = false;

Un exemple de vm est visible dans Vue documentation officielle .

exemple complet:

data: function ()  {
  return {
     questions: [],
     sendButtonDisable : false
  }
},

methods: { 
  postQuestionsContent : function() {
    // This works here.
    this.sendButtonDisable = true;

    // The view model.
    var vm = this;

    setTimeout(function() {
      // This does not work, you need the outside context view model.
      //this.sendButtonDisable = true;

      // This works, since wm refers to your view model.
      vm.sendButtonDisable = true;
    }, 1000); 
  }
}
36
V. Sambor

Cela dépend de la façon dont vous appelez votre méthode postQuestionsContent (si vous l'appelez de manière asynchrone, vous devrez peut-être utiliser bind le contexte this.).

Dans la plupart des cas, vous devriez pouvoir y accéder en utilisant this.$data.YOURPROPNAME, dans ton cas this.$data.sendButtonDisable:

data: function ()  {
  return {
     questions: [],
     sendButtonDisable : false
  }

  },

  methods: 
  { 
     postQuestionsContent : function()
     {
        this.$data.sendButtonDisable = true;
     }
  }
26
nils

Essayez ceci à la place

...
methods: 
{ 
   postQuestionsContent ()
   {
      this.sendButtonDisable = true;
   }
}

L'enregistrement de vos méthodes de la manière indiquée ci-dessus devrait résoudre le problème.

10
The Oracle