Vue.JS $ HTTP顯示來自api的數據

html> 
    <head> 
    <title>Vue App</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.13/vue-resource.min.js"></script> 
</head> 

<body> 
<!-- 
<h1> 
    <a href="http://localhost:1337/"> Home Page</a> 
</h1> 
<h1> 
    <a href="http://localhost:1337/form"> Form Page</a> 
</h1> 
--> 

<div id="my_view"> 
    <p>{{ responseOptions| json }}</p> 
    <br /> 
    <p>{{ origin | json }}</p> 
</div> 

<script> 
    new Vue({ 
     el: '#my_view', 
     data: { 
      origin: '' 

     }, 
     //it is showing an empty array. It's not returning any data. 
     //leave name:"name" out and it returns the whole object? 
     // example from https://github.com/pagekit/vue- resource/blob/master/docs/http.md 


ready: function() { 
      var resource = this.$resource('https://jsonplaceholder.typicode.com/users'); 
      resource.get({name: "name"}).then((response) => { 

       this.$set('responseOptions', response.status) 
       this.$set('origin', response) 
      }); 
     } 
    }) 

     </script> 
    </body> 
    </html>

你好，試圖找出api的vue-resource $ http訪問是如何工作的。所以創建了這個基本頁面，當我將它加載到瀏覽器時，我得到的只是一個空數組。我遵循官方頁面上發佈的指示（https://github.com/pagekit/vue-resource/blob/master/docs/http.md）

我能夠在頁面上顯示response.status，因此腳本正在通信，但數據根本不顯示。如果您訪問該頁面（https://jsonplaceholder.typicode.com/users），那麼數據就在那裏。

我在做什麼錯？請指教...

來源

2016-12-05 Marco

如果你正在使用Vue 2，準備好的鉤子是depracated - 使用掛載，或者更好的選擇是去創建。又是什麼'this。$ resource'？你應該定義'this。$ http' –

檢查這個例子

https://jsbin.com/jeqekexiqa/edit?html,js,console,output

首先我注意到你正在使用VUE的兩個版本一起，這是不是例如與Vue公司2

good.I貼

接下來，this.$resource對我來說有點奇怪，所以我不確定是做什麼的。你可以在全球使用Vue.http，或者如果你想直接在Vue實例中使用this.$http。

在我的例子我定義的數組，在那裏我們將存儲data.Then我寫的方法將觸發HTTP請求和從服務器獲取JSON數據，並在項目陣列數據存儲在我們的數據模型。

但是...這還不夠，因爲我們的方法沒有被觸發，所以我們在創建Vue實例後立即調用它，通過使用created()生命週期鉤子。

在後面的模板中，我們只是用v-for做簡單的迭代來顯示一切正常。

來源

2016-12-05 21:16:33

謝謝貝爾明。非常慷慨的回答。幫了我很多。 – Marco

Vue.JS $ HTTP顯示來自api的數據

回答

相關問題