2017-12-26 12 views
0

Vuexのレンダリングデータに問題があります。私はコンポーネントがマウントされ、私のforループで答えをレンダリングする前にAPI呼び出しをしています。しかし、データが返される前に '計算された'フックがトリガされ、レンダリングされません(未定義のレンダリング)。 私はAngularJSまたは類似のものでちょっとした解決機能を探しています。
また、Reactでは非同期データを受信する方法がredux-saga経由で実装されていることに気づいたことがあります。しかし、私は問題をカバーしたVueの実例を見つけることができません。
P.私はちょうどので、私はいくつかの詳細に間違っている可能性がありヴューを学び始めています、任意のアドバイスはVuex。コンポーネントを起動する前にAPIからデータを受け取った後にデータをレンダリングする方法

<div class="form-group"> 
         <label for="ua">Choose appropriate user-agent</label> 
         <select v-model="selectedUA" class="form-control" id="ua"> 
          <option disabled value="">Please select one</option> 
          <option v-for="option in uaOptions" :value.sync="option.ua"> 
           {{ option.name }} 
          </option> 
         </select> 
        </div> 
    <script> 
     module.exports = { 
     beforeMount() { 
      this.$store.dispatch('proxyList') 
     }, 
     computed: { 
      proxyOptions() { 
      return this.$store.state.proxies 
      } 
     } 
     } 
    </script> 

uaOptions iが成功したAPIコールの後にレンダリングしたい1データである)=私のために参考になります。

この

const actions = { 
    proxyList(context) { 
    return api.get(appConfig.serverAddress + '/get-countries') 
     .then((response) => context.commit('PROXIES_SUCCESS', response)) 
     .catch((error) => context.commit('PROXIES_FAILURE', error)) 
    } 
} 

actions.jsこれはmutation.js

const mutations = { 
    [types.PROXIES_SUCCESS](state, payload) { 
    state.proxies = payload 
    state.proxyInitError = false 
    }, 
    [types.PROXIES_FAILURE](state, payload) { 
    state.proxies = payload 
    state.proxyInitError = true 
    } 
} 
+0

作成されたフックを使用して、インスタンスの作成後にコードを実行できます。 – Muhammad

答えて

0

ない私はあなたが求めているものを理解し、多分あなたは、V-IF = "someVariable" を使用してみてください確かですsomeVariableが 'undefined'でないときにのみリストがレンダリングされるようにして、エラーメッセージを避けることができます。

+0

私は試しましたが、何も変わっていません( –

関連する問題