vue.jsでREST APIからデータを取得する際の問題

vue.jsを使用して残りのAPIからデータを取得しようとしています。しかし、それは動作していません。応答データの表示もエラーステータスの表示もしません。間違ったことを理解できません。vue.jsでREST APIからデータを取得する際の問題

は、ここでそれはurlを示したが、response.dataまたはerror.statusTextを示していない私の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>

です。

私はhereの方法に従った。

出典

2017-08-03 MD. Khairul Basar

であるあなたは、[axios]のような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）'を追加すると 'Hello 'の代わりに' {{ message}} 'が表示されます。つまり、vueは機能しなくなります。そして私は既にあなたが言及した依存関係を使用しています。 –

@ MD.KhairulBasar答えが正しいスクリプトで更新されるようになりました。 – Bert

うわー!!それはうまくいっている！どうもありがとうございます！！：D –

vue.jsでREST APIからデータを取得する際の問題

答えて

関連する問題