Cách Vue để truy cập dữ liệu từ các phương thức là gì?

Question

Tôi đã có mã tiếp theo:

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

     }, 

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

tôi cần phải thay đổi sendButtonDisable true sau postQuestionsContent gọi. Tôi chỉ tìm thấy một cách để làm điều đó với var that = this;. Có giải pháp nào tốt hơn không?

Answer 1

Tùy thuộc vào cách bạn gọi phương thức postQuestionsContent (nếu bạn gọi nó là không đồng bộ, bạn có thể cần phải bind ngữ cảnh this).

Trong hầu hết các trường hợp, bạn sẽ có thể truy cập nó bằng cách sử this.$data.YOURPROPNAME, trong trường hợp của bạn this.$data.sendButtonDisable:

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

    }, 

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

Answer 2

phương pháp Bên nếu bạn không có phạm vi khác được định nghĩa bên trong, bạn có thể truy cập vào dữ liệu của bạn như thế :

this.sendButtonDisable = true; 

nhưng nếu bạn có một phạm vi bên trong hàm sau đó trong vue là một cách sử dụng comon của một biến gọi là vm (viết tắt của xem mô hình) vào đầu của hàm, và sau đó ju st sử dụng nó ở khắp mọi nơi như:

vm.sendButtonDisable = false; 

ví dụ hoàn chỉnh:

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

Hãy thử điều này thay vì

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

Đăng ký phương pháp của bạn theo cách trên nên giải quyết vấn đề.