CODEWITHSUNDEEP
javascriptvue.jsstatevuexgetter
Matagas Ako
Matagas Ako

Reputation: 29

Vue JS - Getters return the object instead the actual value in the store

I am unable to get the customer 'dad' in my store using getters. But, it shows on the screen the objects like this [ "dad" ]. How am I supposed to correct this?. I am a newbie to vue.js

<template>
          <div class="hello">
        <p>{{ GET_CUSTOMERS }}</p>
        </div>
        </template>
    <script>
    import { mapGetters } from 'vuex'
    export default  {
    computed:{
      ...mapGetters([
      'GET_CUSTOMERS'
      ])
    }
    </script>

My store

state: {
            customers: ['dad']
        ],
getters: {
GET_CUSTOMERS(state){
                return state.customers;
            }
}

Upvotes: 0

Views: 1130

Answers (1)

Decade Moon
Decade Moon

Reputation: 34306

Your customers data is an array. When you render an array directly in a template like {{ ['dad'] }}, Vue will render it in the DOM as [ "dad" ].

I take it you want to render just one customer? You can render the first customer like this:

{{ GET_CUSTOMERS[0] }}

To render each customer, you will need to loop over each customer using v-for:

<ul>
  <li v-for="(customer, i) of GET_CUSTOMERS" :key="i">
    {{ customer }}
  </li>
</ul>

Or, if you prefer, you can just join each customer into a single string with each customer separated by a comma:

{{ GET_CUSTOMERS.join(', ') }}

Upvotes: 1

Related Questions