RueサービスからのVueJSレンダリングデータ

Question

httpリクエストからのデータを正常に動作しているコンポーネントにレンダリングしようとしましたが、データがフェッチされている間にnullであるという問題があります。データがnullの間、コンソールはすべてのデータがロードされてVuexストアにコミットされるまで、TypeErrorをスローします。

どのように私は疑わしいと思っています。私は、エラーの発生を防止し、適切なデータがすべて取得されるまで待機する方法を理解しようとしています。私はv-ifを使って他の人がデータがnullであるかどうかを調べるのを見ました。単なる状態をすべてチェックする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'}) 
    } 

Answer 1

私はあなたがあなたのテンプレートであなたの店から何かを表示しようとしていると仮定します。問題は、Vueがまだ存在しないものをレンダリングできないことです。解決策は、データが存在するかどうかを確認することです。あなたが見ることができるようにfetchTheObject()が呼び出されるまでsomeObject.nameが存在しないため、あなたのコンソールにエラーが発生します

<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> 

：

はのは、このコンポーネントの例を見てみましょう。

ソリューションは、その制御するためのいくつかのv-if属性を置くことです：...一般的には

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

、あなたは何かがロードされているユーザーを表示するには、いくつかのスピナーを表示したいの

希望これを

EDITを支援します。そして、あなたのコード内で待って、あなたがここに