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 cuando postQuestionsContent() se llama. Sólo he encontrado una manera de hacerlo; con var that = this;.

Hay una solución mejor?

  • Esto debería funcionar sin var this = that (de hecho, la forma en que presentas en tu ejemplo es meaingless, podría dejarlo fuera). funciones en el methods: objeto estará obligado a la instancia actual. Supongo que te han dejado algo en el ejemplo – estás haciendo alguna de las llamadas AJAX y tratar de cambiar el valor dentro de una devolución de llamada o algo?
  • En mi caso yo tengo mi método conectado a un detector de eventos en un botón. No entiendo vuejs hacer nada más.

3 Comentarios

  1. 36

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

    this.sendButtonDisable = true; 

    pero si usted tiene un ámbito de aplicación dentro de la función, a continuación, en el vue es un uso común de una variable denominada vm (stands para modelo de vista) al comienzo de la función y, a continuación, sólo lo utilizan en todas partes como:

    vm.sendButtonDisable = false;

    Un ejemplo de vm puede ser visto en la Vue documentación oficial así.

    ejemplo completo:

    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); 
      }
    }
    • ESTA respuesta es tan útil para la vue noobs (voobs?). La Vue 2 documentación, incluso hace uso de vm = este en la siguiente página: vuejs.org/v2/guide/computed.html#Watchers, Pero sería fácil para supervisar esta lectura a través de la documentación.
  2. 26

    Depende de cómo usted llame a su postQuestionsContent método (si se llama de forma asincrónica, usted puede ser que necesite para bind la this contexto).

    En la mayoría de los casos, usted debería ser capaz de acceder a él utilizando this.$data.YOURPROPNAME, en su caso this.$data.sendButtonDisable:

    data: function ()  {
      return {
         questions: [],
         sendButtonDisable : false
      }
    
      },
    
      methods: 
      { 
         postQuestionsContent : function()
         {
            this.$data.sendButtonDisable = true;
         }
      }
    • Algunos alguna razón esto no funciona. Creo que la comunidad debería examinar esta cuestión.
    • Hola @TheOracle la pregunta y responderle era válida en el ámbito de la vue 0.x versiones. 2.x debería funcionar normalmente sin $data.
    • Me estoy poniendo este tema con 2.5.17. Podría tener que reportarlo como bug, pero $data obras.
    • este.$de datos.algo no está definido. Mejor usar esto.algo
    • El uso de Vue-cli 3.x NO puedo acceder a las propiedades dentro de data (), por ejemplo, de methods o computed con this.property o con this.$data.property. Hay otra manera?
    • No es un problema en absoluto. La forma correcta de acceder a sendButtonDisable utilizando this.$data es como este: this.$data[sendButtonDisable], porque this.$data‘s de la matriz de la naturaleza. Saludos.

  3. 10

    Probar este lugar

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

    El registro de sus métodos en la forma anterior debe resolver el problema.

Dejar respuesta

Please enter your comment!
Please enter your name here