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'}) 
    }

看这个（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>

一般情况下，你会希望显示一些微调，以表明有些事情是加载用户...

希望这帮助

编辑：，忘了异步代码中的等待，你不需要在这里

如果3000后有数据，会怎么做？ – VMAtm

我不明白 – Hammerbot

你设置'3000'超时等待数据。如果在现实世界的情况下，3000之后不会有数据呢？ – VMAtm

VueJS从REST服务渲染数据

相关推荐