vue.js - v-for 循环数据不会显示

Question

我无法让我的 v-loop 显示我的对象数组中的数据。我从 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>

我知道有类似的例子，我已经尝试过关注它们。所以我只是问，因为我不确定这是我自己的错，还是shopify的错。

标签： vue.jsaxiosshopify

Answer 1

对未来的任何人都好。问题是 shopify 正在传递 {{ }}。这意味着我的代码将不起作用。

但这是我偶然发现的一个解决方案。

在 Shopify 商店中嵌入 Vue 组件