Что такое способ Vue для доступа к данным из методов?

У меня есть следующий код:

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

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

Мне нужно изменить sendButtonDisable на true, когда postQuestionsContent(). Я нашел только один способ сделать это; с var that = this; ,

Есть ли лучшее решение?

Ответ 1

Внутри методов, если у вас нет другой определенной области действия, вы можете получить доступ к своим данным следующим образом:

this.sendButtonDisable = true;

но если у вас есть область действия внутри функции, то в vue обычно используется переменная vm (обозначает модель представления) в начале функции, а затем просто используйте ее везде, например:

vm.sendButtonDisable = false;

Пример vm можно увидеть и в официальной документации Vue.

полный пример:

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); 
  }
}

Ответ 2

Это зависит от того, как вы вызываете свой метод postQuestionsContent (если вы вызываете его асинхронно, вам может понадобиться bind контекст this).

В большинстве случаев вы должны иметь доступ к нему, используя this.$data.YOURPROPNAME, в вашем случае this.$data.sendButtonDisable:

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

  },

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

Ответ 3

Попробуйте это вместо

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

Регистрация методов, описанных выше, должна устранить проблему.