VueJS從REST服務渲染數據

我試圖將數據從http請求呈現給工作正常的組件，問題是數據被抓取時它爲空。當數據爲空時，控制檯會拋出一個TypeError，直到所有數據都被加載並提交給Vuex存儲爲止。VueJS從REST服務渲染數據

所有的工作我如何懷疑，我只是想弄清楚如何防止錯誤被拋出，並等待所有合適的數據被提取。我見過其他人使用V - 如果檢查數據是否爲空將會起作用。它看起來很乏味，而且，如果沒有應用v-if語句檢查每個單一狀態的應用程序，那麼顯然有更好的方法來實現相同的結果。

我遇到了這個解決方案，但它仍然沒有工作我怎麼會這樣，我仍然收到相同的控制檯錯誤。我是否正確使用這些關鍵詞，並且他們是否在正確的位置？因爲我嘗試過的每一個變化都沒有改變。

Vuex操作：

const actions = { 
    getThread ({ commit }, payload) { 
    Vue.http 
     .get(`http://localhost:9000/threads/${payload.id}`) 
     .then(async response => { 
     commit(FETCH_THREAD, await response.data) 
     }) 
    } 
}

這是我的VUE文件呼籲行動中：

created() { 
    this.$store.dispatch('getThread', {id: '59280ab5acbafb17af9da902'}) 
    }

來源

2017-05-28 Jordan

看這個（https://router.vuejs.org/en/advance d/data-fetching.html）。 –

@VAMSIKRISHNA我也研究過這個，但它在控制檯中產生了相同的錯誤。 – Jordan

爲什麼「異步等待」？在'.then'中解析'get'時，您已經收到數據。此外，變異只能是同步的，所以如果我沒有遺漏某些東西，這種異步等待提交是沒有意義的。 – wostex

我假設你正在試圖從顯示你的店在模板中的東西。問題是，Vue無法渲染尚不存在的東西。解決方案是檢查數據是否存在。

讓我們這個組件例如：

<template> 
    <div> 
     {{ someObject.name }} 
    </div> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       someObject: null 
      } 
     }, 
     methods: { 
      fetchTheObject() { 
       this.someObject = { 
        id: 1, 
        name: 'My object' 
       } 
      } 
     }, 
     created() { 
      setTimeout(() => { 
       this.fetchTheObject() 
      }, 3000) 
     } 
    } 
</script>

正如你所看到的，你會因爲someObject.name不存在，直到fetchTheObject()被稱爲獲得您的控制檯的錯誤。

解決的辦法是把一些v-if屬性來控制：

<template> 
    <div> 
     <span v-if="someObject === null">Fetching the object</span> 
     <span v-else>{{ someObject.name }}</span> 
    </div> 
</template>

一般情況下，你會希望顯示一些微調，以表明有些事情是加載用戶...

希望這幫助

編輯：，忘了異步代碼中的等待，你不需要在這裏

來源

2017-05-28 12:40:19 Hammerbot

如果3000後有數據，會怎麼做？ – VMAtm

我不明白 – Hammerbot

你設置'3000'超時等待數據。如果在現實世界的情況下，3000之後不會有數據呢？ – VMAtm

VueJS從REST服務渲染數據

回答

相關問題