2017-12-26 7 views
0

Ich habe einige Probleme mit den Render-Daten von Vuex. Ich mache einen API-Anruf, bevor die Komponente montiert wird und werde die Antwort in meiner for-Schleife wiedergeben. Der "berechnete" Hook wird jedoch ausgelöst, bevor Daten zurückgegeben werden und nicht gerendert werden (Rendering undefiniert). Ich suche etwas Funktion in AngularJS oder etwas ähnliches auflösen.
Auch Google half mir zu erkennen, dass in React die Art des Empfangens von asynchronen Daten über Redux-Saga implementiert wird. Aber ich kann kein funktionierendes Beispiel auf Vue finden, das mein Problem behandelte.
P.S. Ich lerne Vue gerade erst begonnen, so kann ich auf einige Details falsch sein, wird jede Beratung hilfreich sein für mich =)Vuex. Wie man Daten wiedergibt, nachdem sie von der API empfangen wurden, bevor die Komponente gestartet wurde

<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 Daten, die man i machen will nach erfolgreicher api Anruf.

dies actions.js

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

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

Der erstellte Hook kann zum Ausführen von Code verwendet werden, nachdem eine Instanz erstellt wurde. – Muhammad

Antwort

0

nicht sicher, ob ich verstehe, was Sie fordern, aber vielleicht sollten Sie versuchen, mit v-if = "somevariable" um sicherzustellen, dass die Liste nur dann gerendert wird, wenn einige Variablen nicht undefiniert sind, um die Fehlermeldung zu vermeiden.

+0

Ich habe versucht, aber nichts geändert ( –

Verwandte Themen