List Rendering from "vuex store"


#1

Having tried for 2 hrs,

List render from own component data works fine with v-for.

But, I’d like to fetch data from vuex store by mapState with computed props.
The v-for calls the computed props of mapState and will render the array of Objects.

[
    {
        "id": "BqFJEoLkkfrRxni6GcLz",
        "cat": "mask",
        "des": "Rice love for everyday! WooHoo!",
        "imgUrl": "https://zzz.com",
        "price": 21000,
        "name": "Keana Mask",
        "status": "pre Order"
    },
    {
        "id": "NTnRfNbwDG0tjUTjkpxK",
        "cat": "suncream",
        "des": "Let's prevent UV this summer! Yay!",
        "imgUrl": "https://xxx.com/img.url,
        "price": 19000, "name":
        "Biore Aqua Rich",
        "status": "in Stock"
    }
]

I can display the whole obj like below

<ul>
  <li v-for="(product) in products" :key="product.id">
      <p>{{product}}</p>
  </li>
</ul>

I cannot render {{ product.name }}, {{ product.cat }} etc… I’ve tried this one



  • {{ product[0].name }}



This render only the “name” at array pos [0].
What I’m doing wrong?
Any ideas please?

Thanks in advance!


#2
<ul>
  <li v-for="(product) in products" :key="product.id">
      <p>{{product.name}}</p>
  </li>
</ul>

#3

You are displaying the whole object, which you shouldn’t do.

The code example that @CaiPeng1989 provides is correct. You want to render the name only, so you need to specify to render name property on the product object, thus resulting in:

<ul>
  <li v-for="product in products" :key="product.id">
      <p>{{product.name}}</p>
  </li>
</ul>

#4

Sorry for vague question. I’ve updated the question. I mean I could render v-for with Component’s Own Data but I couldn’t render the data fetched from vuex store by mapState Computed Props.

Since it’s a array, I tried {{ product[0].name }} and the data is displayed.

Do I need to loop through the whole list again?


#5

Maybe {{products.length && products[0].name}}


#6

Ah alright. Did you set the products-property to an empty array in the state?

Below is a code example for how you can create a posts module in your Vuex store. This module consists of a file for the state, the actions and the mutations. For more information, see the official documentation.

// product/state.js

export default {
  items: [],
};
// product/mutations.js

export default {
  setProducts(state, products) {
    // Products are the products fetched from the API.
    state.items = products;
  },
};
// product/actions.js
export default {
  // Notice that I'm using async/await. If you're not familiar with this approach and want to use a promise, that is also fine.
  // Just make sure that you fire the correct function in the `.then(...)` callback.
  async fetchProdusct({ commit }) {
    const posts = await functionToFetchProductsFromApi();

    commit('setProducts', products);
  },
};

And in your component you can do something like this:

import { mapState } from 'vuex';

export default {
  name: 'ProductList',
  mounted() {
    this.$store.dispatch('products/fetchProducts');
  },
  computed: {
    ..mapState({
      products: state => state.products.items,
    }),
  },
};
<template>
  <ul>
    <li 
      v-for="product in products"
      :key="product.id"
    >
      <p>{{ product.name }}</p>
    </li>
  </ul>
</template>

#7

Thank everyone for helping me out
@petervmeijgaard my current app has the same structure you described.

But I cannot get out the items in array as your code.

My current workaround is iterating v-for twice and the {{ product.name }} etc … come out.

I still don’t know what’s missing for regular one time v-for?

<li v-for="product in products" :key="product.id">
    <div v-for="item in product" :key="item.id">
         <p>{{item.imgUrl}}</p>
    </div>
</li>

#8

It looks like that products is a 2-dimensional array. Can you confirm if that’s the case by doing:

export default {
  mounted() {
    console.log(this.products);
  },
};

#9

Yes, it’s kinda like I mistaken the “Object” and “Array” :slight_smile:
I checked every piece that pass through the components and found I am rendering obj instead of array.

Now the problem is fixed with regular
<ul> <li v-for="i in items" :key="i.id">{{i.name}}</li> </ul>

Thank you and everyone who helped me out!