Jaki jest sposób Vue na dostęp do danych z metod?

Question

Mam następny kod:

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

     }, 

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

muszę zmienić sendButtonDisable true po postQuestionsContent powołania. Znalazłem tylko jeden sposób, aby to zrobić z var that = this;. Czy istnieje jakieś lepsze rozwiązanie?

Answer 1

To zależy od sposobu wywołania metody postQuestionsContent (jeśli wywołasz ją asynchronicznie, może być konieczne uzyskanie kontekstu 0123).

W większości przypadków powinieneś być w stanie uzyskać do niego dostęp za pomocą this.$data.YOURPROPNAME, w przypadku this.$data.sendButtonDisable:

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

    }, 

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

Answer 2

metody wewnętrzne, jeśli nie zostały zdefiniowane wewnątrz inny zakres, można uzyskać dostęp do swoich danych, tak :

this.sendButtonDisable = true; 

ale jeśli masz zasięg wewnątrz funkcji wówczas w Vue to wykorzystanie Comon o zmiennej o nazwie VM (stoi na widoku modelu) na początku funkcji, a potem ju st używać go wszędzie jak:

vm.sendButtonDisable = false; 

kompletnego przykład:

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

Spróbuj zamiast

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

Zarejestrowanie metod w powyższy sposób należy rozwiązać ten problem.