私は次のコードを持っています:
{
data: function () {
return {
questions: [],
sendButtonDisable: false,
}
},
methods: {
postQuestionsContent: function () {
var that = this;
that.sendButtonDisable = true;
},
},
},
postQuestionsContent()
が呼び出されたときに、sendButtonDisable
をtrueに変更する必要があります。これを行う方法は1つしか見つかりませんでした。 var that = this;
で。
より良い解決策はありますか?
内部で別のスコープが定義されていない場合、内部メソッドでは、そのようなデータにアクセスできます。
this.sendButtonDisable = true;
ただし、関数内にスコープがある場合、vueにはvm
と呼ばれる変数の一般的な使用法があります(view model)関数の先頭で、次のようにどこでも使用します:
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);
}
}
postQuestionsContent
メソッドを呼び出す方法によって異なります(非同期で呼び出す場合は、bind
this
コンテキストが必要になる場合があります)。
ほとんどの場合、this.$data.YOURPROPNAME
、場合によってはthis.$data.sendButtonDisable
を使用してアクセスできます。
data: function () {
return {
questions: [],
sendButtonDisable : false
}
},
methods:
{
postQuestionsContent : function()
{
this.$data.sendButtonDisable = true;
}
}
代わりにこれを試してください
...
methods:
{
postQuestionsContent ()
{
this.sendButtonDisable = true;
}
}
上記の方法でメソッドを登録すると、問題が解決するはずです。