CODEWITHSUNDEEP
vue.jsaxiosshopify
GrandMaster
GrandMaster

Reputation: 23

v-for loop data won't show

I can't get my v-loop to show the data in my object array. That i got from the API. It's pretty simple, and im sure it should be working. So im wondering if it's something else. The API is not open, so here is an image: https://i.sstatic.net/Z47H8.jpg

<div class="" id="buffetfeatured">
    <div v-for="x in product">{{ x.title }}</div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#buffetfeatured',
        data() {
            return {
                product: []
            }
        },
        mounted () {
            axios.get('https://ebuffet-dk.myshopify.com/admin/api/2020-01/products.json')
                .then(response => (this.product = response.data.products))
                .catch( error => { console.log(error); });
        }
    });
</script>

I know that there are similar examples, and i've tried following them. So im only asking, because im unsure if it's my own fault, or shopify's.

Upvotes: 1

Views: 900

Answers (2)

mohammad sajjad gholami
mohammad sajjad gholami

Reputation: 111

youre v-for it is true but it doesn't work because doesn't have any data

this code is wrong ** this.product = response.data.products**

You cannot provide obj equal to arry you should push obj to array 

this.product.push(response.data.products)

Upvotes: 0

GrandMaster
GrandMaster

Reputation: 23

Alright for anyone in the future. The problem is shopify is passing {{ }}. Which means that my code won't work.

But here is a solution i stumbled across.

Embed Vue component within Shopify store

Upvotes: 1

Related Questions