Vue JS AJAX計算屬性

好吧，我相信我非常接近有我的第一個工作Vue JS應用程序，但我一直在小小的障礙後打小絆腳石。我希望這是最後一個小小的障礙。我正在使用vue-async-computed和axios從我的API中獲取客戶對象。Vue JS AJAX計算屬性

然後，我將該屬性傳遞給子組件並呈現爲像{{customer.fName}}這樣的屏幕。

據我所知，ajax調用正在進行，並且預期會返回響應，問題是頁面上沒有任何內容，客戶對象在ajax調用之後似乎沒有更新。

這裏是我工作的

http://pastebin.com/DJH9pAtU

組件有一個名爲「客戶」一個計算性能，正如我說的，我可以在網絡選項卡中看到的個人資料頁.vue文件時，正在提出請求，並且沒有錯誤。響應被送到這裏的子組件：

<app-customerInfo :customer="customer"></app-customerInfo>

該組件內我呈現的數據頁：

{{customer.fName}}

但是，頁面顯示沒有結果。有沒有辦法來驗證檢查員中的「客戶」屬性的價值？有什麼明顯的我失蹤？

來源

2017-02-12 Ampix0

退房的vue.js Chrome瀏覽器開發工具，他們是偉大的用於檢查的變量的值，什麼不是。 – dargue3

你沒有回覆異步的承諾。計算屬性'客戶'。也許這是你的問題。 'return this.axios.get（'/ api/customer/get /'+ this。$ route.params.id）.then（...）'。 – AWolf

這是因爲計算屬性期望返回一些東西。但我想知道爲什麼你使用這種類型的任務的計算屬性？ –

我一直在使用Vue約一年半，我意識到處理異步數據加載和那些好東西的鬥爭。下面是我會成立您的組件：

<script> 
export default { 

    components: { 
     // your components were fine 
    }, 

    data: function() { 
     return { 
     customer: {}, 
     } 
    }, 

    mounted: function() { 
     this.axios.get('/api/customer/get/' + this.$route.params.id) 
      .then(function(response){ 
      this.customer = response.data; 
      }.bind(this)); 
    } 
} 
</script>

所以我所做的就是初始化數據功能customer您的組件，那麼當組件獲得mounted，發送axios調用服務器。當該呼叫返回時，將this.customer設置爲該數據。就像我在上面的評論中所說的那樣，肯定會檢查出Vue's devtools，他們讓追蹤變量和事件變得非常簡單！

來源

2017-02-13 01:30:51 dargue3

嘿，謝謝你的回覆。我目前仍然遇到錯誤。我想提一下，如果它增加了更多的複雜性，但我將該屬性傳遞給子組件以顯示。我改變了我的代碼，看起來像你的，並初始化爲「加載」頁面顯示加載的文本應該是什麼，以及由於某些原因的錯誤，當我添加像上面你的生命週期鉤。 http://imgur.com/a/Pq3NO – Ampix0

好的，是的，這是我應該想到的一個錯誤。您需要爲子組件的props中設置默認值，在此組件的data（）函數中定義默認值，或者在引用某個鍵的任何行上放置一個v-if =「customer」 'customer' – dargue3

有一件事我只是想，'this.axios'應該只是常規'axios'，假設你使用了Vue和Laravel的默認設置。 – dargue3

我相信你的錯誤是命名。 vue-async-computed插件需要Vue對象的新屬性。另外，我認爲異步函數應該返回一個Promise，但可能是錯誤的。

computed: { 
       customer: async function() { 
        this.axios.get('/api/customer/get/' + this.$route.params.id) 
        .then(function(response){ 
         return(response.data); 
        }); 
       } 
      }

應該是：

asyncComputed: { 
       return customer: async function() { 
        this.axios.get('/api/customer/get/' + this.$route.params.id) 
        .then(function(response){ 
         return(response.data); 
        }); 
       } 
      }

來源

2017-05-04 23:12:39

Vue JS AJAX計算屬性

回答

相關問題