2017-08-03 14 views
0

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の方法に従った。

+0

であるあなたは、[axios]のようなHTTPクライアントパッケージを使用する必要があります(https://github.com/mzabriskie/axios)または[vue-resource](https://github.com/pagekit/vue-resource)を参照してください。 Vueにはデフォルトでは含まれていません。 – ironcladgeek

+0

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

答えて

3

これは、vue-resourceが見つからないためです。 はまた、この依存関係を含める:

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

そしてVUEのインスタンスを作成する前に、この貼り付けます。ここでは

Vue.use(VueResource) 

は作業フィドルhttps://jsfiddle.net/DarkFruits/euv04n9d/

+0

これは機能しません。 'Vue.use(VueResource)'を追加すると 'Hello 'の代わりに' {{ message}} 'が表示されます。つまり、vueは機能しなくなります。そして私は既にあなたが言及した依存関係を使用しています。 –

+2

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

+0

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

関連する問題