How to display an array of data containing objects in vue.js?

Question

My vue component like this :

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

The result of console.log(response.data) like this :

I want to display array data like the image above. But it is not show the value. Maybe my loop in the vue component is still wrong

How can I solve this problem?

Decade Moon · Accepted Answer · 2017-12-18 23:13:33Z

2

filteredStates performs an async API request, you mustn't do this in a computed property (in fact, you're not returning anything from that property anyway so it's useless).

You should make filteredStates a data property, then watch for changes to keyword then update filteredStates in response.

Something like:

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

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

answered Dec 18, 2017 at 23:13

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display an array of data containing objects in vue.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related