This is my store in Vue dev tools:
This is my Vue component:
<template> <div> <div v-for="product in allProducts" :key="product._id" > {{ product.brand }} </div> </div> </template> <script> import { mapGetters } from "vuex"; export default { data() { return{ allProducts:[], } }, computed: { ...mapGetters(["allProducts"]) }, mounted() { this.$store.dispatch("getProducts"); } }; </script>
If I use this:
{{allProducts}}
I got all the products.
But when trying to use this loop:
<div v-for="product in allProducts" :key="product._id" > {{ product.brand }} </div>
Do not show.
Can you tell me what to do?
allProducts
is an object with propertyproducts
, so in order to loop over products tryproduct in allProducts.products