Wie wird ein Array von Daten angezeigt, die Objekte in vue.js enthalten?

Question

Meine vue Komponente wie folgt aus:

<template> 
    ... 
     <ul v-if="!selected && keyword"> 
      <li v-for="state in filteredStates" @click="select(state.name)">{{ state.name }}</li> 
     </ul> 
    ... 
</template> 
<script> 
    export default { 
     ... 
     computed: { 
      filteredStates() { 
       const data = this.$store.dispatch('getProducts', { 
        q: this.keyword 
       }) 
       data.then((response) => { 
        console.log(response.data) 
        return response.data 
       }) 
      } 
     } 
    } 
</script> 

Das Ergebnis console.log (response.data) wie folgt aus:

Ich möchte oben wie die Bild-Array-Daten anzuzeigen. Aber es zeigt nicht den Wert. Vielleicht ist meine Schleife in der Vue-Komponente immer noch falsch

Wie kann ich dieses Problem lösen?

Answer 1

filteredStates führt eine asynchrone API-Anfrage aus, Sie müssen dies nicht in einer berechneten Eigenschaft tun (tatsächlich geben Sie nichts von dieser Eigenschaft zurück, also ist es nutzlos).

Sie sollten eine Dateneigenschaft filteredStates machen, dann auf Änderungen an keyword achten und dann filteredStates als Antwort aktualisieren.

Etwas wie:

data() { 
    return { 
    filteredStates: [] 
    } 
}, 

watch: { 
    keyword(value) { 
    this.$store.dispatch('getProducts', { q: value }) 
    .then(res => { 
     this.filteredStates = res.data;   
    }) 
    } 
}