vue.js - versiones - ¿Cuál es la mejor manera de acceder a los datos de los métodos?

vue.js tutorial español

Question

Tengo el siguiente código:

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

      },

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

Necesito cambiar sendButtonDisable a true después de la llamada postQuestionsContent . Solo encontré una forma de hacerlo con var that = this; . ¿Hay alguna solución mejor?

Answer 1

Depende de cómo llame a su método postQuestionsContent (si lo llama de forma asíncrona, es posible que necesite bind this contexto).

En la mayoría de los casos, debe poder acceder utilizando this.$data.YOURPROPNAME , en su caso this.$data.sendButtonDisable :

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

  },

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

Answer 2

Dentro de los métodos si no tiene otro alcance definido en el interior, puede acceder a sus datos así:

this.sendButtonDisable = true; 

pero si tiene un alcance dentro de la función, entonces en vue es un uso común de una variable llamada vm (representa el modelo de vista ) al comienzo de la función, y luego simplemente utilícela en todas partes como:

vm.sendButtonDisable = false;

ejemplo completo:

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

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

    // The view model.
    var vm = this;

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

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

Answer 3

Prueba esto en cambio

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

El registro de sus métodos de la manera anterior debería resolver el problema.