vue.js從REST API獲取數據的麻煩

我想從使用vue.js的其他api獲取數據。但它不起作用。它既不顯示響應數據也不顯示錯誤狀態。無法弄清楚出了什麼問題。vue.js從REST API獲取數據的麻煩

這裏是我的index.html

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

     <div id="app"> 
      {{ message }} 
     </div> 

     <script> 
      var url = "http://clients.itsd.com.bd/table-cartel/wp-json/wp/v2/categories"; 
      var app = new Vue({ 
       el: "#app", 
       data: { 
        message: "Hello!" 
       }, 
       methods: { 
        work: function(){ 
         alert(url); 
         this.$http.get(url).then(function(response){ 
          alert(response.data); 
          this.message = response.data; 
         }, function(error){ 
          alert(error.statusText); 
         }); 
        } 
       }, 
       mounted: function(){ 
        this.work(); 
       } 
      }); 
     </script> 
    </body> 
</html>

它顯示url，但沒有表現出response.data或error.statusText。

我遵循here描述的過程。

來源

2017-08-03 MD. Khairul Basar

你應該使用一個HTTP客戶端軟件包，例如[愛可信] （https://github.com/mzabriskie/axios）或[vue-resource]（https://github.com/pagekit/vue-resource）。 Vue默認不包含一個。 – ironcladgeek

https://stackoverflow.com/documentation/vue.js/9350/using-this-in-vue#t=201708031319535958854 – PatrickSteele

這是因爲您缺少vue-resource。也包括這種依賴性：

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

和創建VUE實例之前，粘貼此：

Vue.use(VueResource)

這裏是工作提琴https://jsfiddle.net/DarkFruits/euv04n9d/

來源

2017-08-03 12:43:08

它不起作用。當我添加'Vue.use（VueResource）'時，它顯示'{message}}'而不是'Hello'。這意味着vue停止工作。我已經在使用你提到的依賴關係了。 –

@ MD.KhairulBasar現在用正確的腳本更新答案。 – Bert

哇！它工作正常！非常感謝！！：d –

vue.js從REST API獲取數據的麻煩

回答

相關問題