Vue 通过什么方式访问方法中的数据？

我有以下密码:

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


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

当调用 postQuestionsContent()时，我需要将 sendButtonDisable改为 true。我发现只有一种方法可以做到这一点: 使用 var that = this;。

还有更好的解决办法吗？

126120 次浏览
小开

It depends on how you call your postQuestionsContent method (if you call it asynchronously, you might need to bind the this context).

In most cases, you should be able to access it using this.$data.YOURPROPNAME, in your case this.$data.sendButtonDisable:

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


},


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

Inside methods if you don't have another scope defined inside, you can access your data like that:

this.sendButtonDisable = true;

but if you have a scope inside the function then in vue is a common usage of a variable called vm (stands for view model) at the beginning of the function, and then just use it everywhere like:

vm.sendButtonDisable = false;

An example of vm can be seen in the Vue official documentation as well.

complete example:

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

Try this instead

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

Registering your methods in the above manner should resolve the issue.

小开

I tried both this.$data.sendButtonDisable and vm.sendButtonDisable and did not work for me.

But I got it working with outer_this = this, something like:

methods: {
sendForm(){
var outer_this;
        

outer_this = this;
        

$.ajax({
url: "email.php",
type: "POST",
dataType: "text",
data: {
abc: "..."
},
success: function(res){
if(res){
//...
                        

outer_this.sendButtonDisable = false;
}else{
//...
}
}
});
}
},

提交答案