v-for l oop данные не будут отображаться

Question

Я не могу заставить свой vl oop показывать данные в моем массиве объектов. Это я получил от API. Это довольно просто, и я уверен, что это должно работать. Так что мне интересно, если это что-то еще. API не открыт, поэтому вот изображение: https://imgur.com/a/qIES7Pm

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

Я знаю, что есть похожие примеры, и я пытался следовать им. Так что я только спрашиваю, потому что я не уверен, что это моя вина, или виноват.

Answer 1

Хорошо для всех в будущем. Проблема в том, что shopify проходит {{}}. Это означает, что мой код не будет работать.

Но вот решение, с которым я столкнулся.

Вставить Vue компонент в магазин Shopify

Answer 2

вы v - потому что это правда, но это не работает, потому что нет данных

этот код неверен ** this.product = response.data.products **

Вы не можете указать obj, равный arry, вы должны указать pu sh obj для массива

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