vue.js에 개체가 포함 된 데이터 배열을 표시하는 방법은 무엇입니까? 이런

Question

내 VUE 성분 : CONSOLE.LOG (response.data)의

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

결과이 같은

는 I 위의 이미지와 같은 배열의 데이터를 표시하기 원한다. 그러나 그것은 가치를 보여주지 않습니다. 어쩌면 vue 구성 요소의 루프가 여전히 잘못되었습니다

이 문제를 어떻게 해결할 수 있습니까?

Answer 1

filteredStates은 비동기 API 요청을 수행하므로 계산 된 속성에서이 작업을 수행해서는 안됩니다. 실제로이 속성에서 아무 것도 반환하지 않으므로 쓸모가 없습니다.

filteredStates을 데이터 속성으로 설정 한 다음 keyword의 변경 사항을 확인한 다음 응답으로 filteredStates을 업데이트해야합니다.

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

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