vuejs＆http.getコールが動作しない

私はvuejsで作業を始めています。私は成功なしでhttp getコールを作ろうとしています。私はそれを行う方法を示すいくつかの例を試しましたが、私のコンソールで次のエラーが表示されます：これは$ httpは未定義です。vuejs＆http.getコールが動作しない

HTML

<!doctype html> 
<html> 
    <head> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/css/uikit.min.css" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/js/uikit.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/js/uikit-icons.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet" type="text/css"/> 


    <script src="https://unpkg.com/vue"></script> 


    </head> 
    <body> 

     <div id="app"> 
      <p v-bind:title='message'> 
       {{ message }} 
      <p> 
      <button v-on:click='changeView("matrice")'>get data</button> 


     </div> 
    </body> 
     <script type="text/javascript" src="/front/lala_web/matrice.js"></script> 
</html>

JS次のJSを使用して作業を呼び出しますが、そうすることがvuejsのdata.message値を変更しないHTTPを取得することができ

var app = new Vue({ 
    el: '#app', 
    data: { 
    message: 'Empty data' 
    }, 
    methods:{ 
    changeView: function(v){ 
     this.$http.get('/view/'+v) 
      .then(function(resp){ 
       this.message = resp.data; 
      }) 
      .catch(function(){alert('Error')}); 
     } 
    } 
})

I'beenと私は次のエラーデータが定義されていない取得します。あなたはthis.messageないdata.messageを参照する必要が

var app = new Vue({ 
    el: '#app', 
    data: { 
    message: 'Empty data' 
    }, 
    methods:{ 
    changeView: function(v){ 
     var viewUrl = '/view/' 

     $.ajax({ 
      url: viewUrl+v, 
      method: 'GET', 
      success: function (resp) { 
       if (resp.error == false){ 
        console.log(resp) 
        data.message = resp.data 
       } 

      }, 
      error: function (error) { 
       console.log(error) 

      } 
     }); 

    } 
    } 
})

出典

2017-05-24 ArtFilPortrait Artiste tisseu

'この$ http'典型的に添加されます[VueResource]（https://github.com/pagekit/vue-resource）というプラグインから – Bert

。成功ハンドラでthisは、Vueのインスタンスを参照していないため、また、あなたは、AJAX呼び出しの範囲外thisへの参照を保存する必要があります。

changeView: function(v){ 
    var viewUrl = '/view/' 
    var self = this; 

    $.ajax({ 
     url: viewUrl+v, 
     method: 'GET', 
     success: function (resp) { 
      if (resp.error == false){ 
       console.log(resp) 
       self.message = resp.data 
      } 
     }, 
     error: function (error) { 
      console.log(error) 
     } 
    }); 
}

出典

2017-05-24 20:05:39 thanksd

@BertEvans yep、私は彼のデータオブジェクトにあったものを誤解しました。 – thanksd

が更新されました！ありがとう –

@ArtFilPortraitArtistetisseuこれがあなたの問題を解決したら、それをアップアップして受け入れるべきです。 – Bert

vuejs＆http.getコールが動作しない

答えて

関連する問題