vuejs＆http.get調用不工作

我開始與vuejs合作，並且我試圖讓一個沒有成功的http調用。我已經嘗試了幾個例子，展示瞭如何做到這一點，但是在我的控制檯中出現以下錯誤：這個。$ 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>

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能夠得到一個HTTP GET調用工作使用下面的JS，但這樣做不會改變vuejs的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.message不data.message。此外，你需要一個參考保存到this Ajax調用的範圍之內，因爲this在成功處理程序不指Vue公司的實例：

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是的，我誤解了他的數據對象中的內容。更新 – thanksd

工作！謝謝 –

@ArtFilPortraitArtistetisseu如果這解決了你的問題，你應該upvote並接受它。 – Bert

vuejs＆http.get調用不工作

回答

相關問題