web-dev-qa-db-ja.com

メソッドからデータにアクセスするVue方法とは何ですか？

私は次のコードを持っています：

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

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

postQuestionsContent()が呼び出されたときに、sendButtonDisableをtrueに変更する必要があります。これを行う方法は1つしか見つかりませんでした。 var that = this;で。

より良い解決策はありますか？

javascriptvue.jsmethods
40
Dmitry Bubnenkov

内部で別のスコープが定義されていない場合、内部メソッドでは、そのようなデータにアクセスできます。

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); 
  }
}
36
V. Sambor

postQuestionsContentメソッドを呼び出す方法によって異なります（非同期で呼び出す場合は、bindthisコンテキストが必要になる場合があります）。

ほとんどの場合、this.$data.YOURPROPNAME、場合によってはthis.$data.sendButtonDisableを使用してアクセスできます。

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

  },

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

代わりにこれを試してください

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

上記の方法でメソッドを登録すると、問題が解決するはずです。

10
The Oracle