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调用不工作

回答

相关问题