Ajax関数内のVue.jsコンポーネントプロパティへのアクセス

Question

次のコードは、urlからデータを取り出し、そのデータをプロパティに設定しようとするコンポーネント関数を指します。それは動作していないようだ、thisは、Ajax Clousureのスコープからアクセスできないようです。

var MyComp = Vue.extend({ 
props: { 
     html_prop: {} 
     .... 
}, 
methods: { 
     fetchCondiciones: function(url){ 

      $.ajax({ 
        type: "GET", 
        url: url, 
        cache: false, 
        data: vardata , 
        success: function(data,status,error) { 
         if(data!=''){ 
          this.html_prop = data; 
         } 
        }, 
        error: function(data,status,error){ 
         alert(error); 
        } 
      }); 

     } 

     ... 
    } 
}) 

thisにはどうすればアクセスできますか？

Answer 1

コールバックは当然コンポーネントのコンテキストで呼び出されていないとしてあなたは、thisコンテキストを.bindする必要があります。

var MyComp = Vue.extend({ 
props: { 
     html_prop: null, 
}, 
     // .... 
     fetchCondiciones: function(url){ 

      $.ajax({ 
        type: "GET", 
        url: url, 
        cache: false, 
        data: vardata, 
        success: function(data,status,error) { 
         if(data != ''){ 
          this.html_prop = data; 
         } 
        }.bind(this), // bind this here 
        error: function(data,status,error){ 
         alert(error); 
        }.bind(this) // bind this here 
      }); 

     } 

     // ... 
}); 

あなたがここに.bind及びこれについての詳細を学ぶことができます。すでにhttps://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Answer 2

として、この問題を解決するには.bindが問題になりますが、私は別のアプローチを使用して、Ajax呼び出しやネストされた関数の前に変数にthisを格納します。メソッド内でコードが大きくなった場合に非常に役立ちます。また読むのも簡単です。

thisは、たとえばselfという名前のvarに保存できます。その後、そのメソッドのどこにでも問題なく、selfを使用してください。

var MyComp = Vue.extend({ 
props: { 
    html_prop: null, 
}, 
    // .... 
    fetchCondiciones: function(url){ 

     var self = this; 

     $.ajax({ 
       type: "GET", 
       url: url, 
       cache: false, 
       data: vardata, 
       success: function(data,status,error) { 
        if(data != ''){ 
         self.html_prop = data; 
        } 
       } 
       error: function(data,status,error){ 
        alert(error); 
       } 
     }); 

    } 

    // ... 
}); 

UPDATE：

今日はちょうどES6矢印関数の構文を使用することができます。

関数内部thisの値は、周囲の範囲によって決定され、新しい変数を作成する、またはbindを使用する必要はありません：

// .... 
    fetchCondiciones: url => { 
     $.ajax({ 
       type: "GET", 
       url: url, 
       cache: false, 
       data: vardata, 
       success: (data,status,error) => { 
        if(data != ''){ 
         this.html_prop = data; 
        } 
       } 
       error: (data,status,error) => { 
        alert(error); 
       } 
     }); 
    } 

または：

// .... 
    fetchCondiciones(url) { 
     $.ajax({ 
       type: "GET", 
       url: url, 
       cache: false, 
       data: vardata, 
       success(data,status,error) { 
        if(data != ''){ 
         this.html_prop = data; 
        } 
       } 
       error(data,status,error) { 
        alert(error); 
       } 
     }); 
    } 

Answer 3

contextオプションを指定してthisに設定することができます。

私はバインディングよりもそれをより読みやすく見えるので、thisの方が好きです。 jQuery AJAX docsから

：すべてのコールバック内

this参照が設定で$.ajaxに渡さcontextオプションでオブジェクトです。 contextが指定されていない場合、thisはAjax設定自体への参照です。