vue.js에서 개체를 포함하는 데이터 어레이를 표시하는 방법

vue.js에서 개체를 포함하는 데이터 어레이를 표시하는 방법

내 vue 컴포넌트는 다음과 같습니다.

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

console.log(response.data)의 결과는 다음과 같습니다.

위 그림과 같이 어레이 데이터를 표시하고 싶습니다.하지만 그것은 가치를 보여주지 않는다.vue 컴포넌트의 루프가 아직 잘못되었을 수 있습니다.

어떻게 하면 이 문제를 해결할 수 있을까요?

filteredStates는 비동기 API 요청을 수행하므로 계산된 속성에서는 이 작업을 수행할 수 없습니다(사실 해당 속성에서 아무것도 반환하지 않으므로 사용할 수 없습니다).

당신이 만들어야 한다.filteredStates데이터 속성에서 변경 사항을 확인합니다.keyword그 후 업데이트하다filteredStates응답으로.

예를 들어 다음과 같습니다.

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

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

언급URL : https://stackoverflow.com/questions/47877750/how-to-display-an-array-of-data-containing-objects-in-vue-js