Question

我的Vue组件从API请求成功获取数据，并以laravel资源的形式返回，我想根据响应显示产品卡。即使我可以在vue devTools中看到它，但它不会显示在我的网站中。

我的Vue组件：


    <div class="clearfix visible-sm visible-xs">
        <!-- Product Single -->
        <div  v-for="(product,key) in products" v-bind:key="product_slug"  class="col-md-4 col-sm-6 col-xs-6">
            <div class="product product-single">
                <div class="product-thumb">
                    <div class="product-label">
                        <span>New</span>
                        <span class="sale">-20%</span>
                    </div>
                    <a :href="shop" class="main-btn quick-view"><i class="fa fa-search-plus"></i>
                        View
                    </a>

                    <a href='#'><img :src="product.product_image_1" alt=""
                                     class="img-responsive" width="400px"></a>
                </div>
                <div class="product-body">
                    <h3 class="product-price">{{ product.price }}
                        <del class="product-old-price">{{ product.OldPrice }}</del>
                    </h3>
                    <div class="product-rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o empty"></i>
                    </div>
                    <h2 class="product-name"><a href="#">{{ product.slug }}</a></h2>
                    <div class="product-btns">

                        <button type="submit" class="main-btn icon-btn"><i class="fa fa-heart"></i>
                        </button>
                        <button class="main-btn icon-btn"><i class="fa fa-exchange"></i>
                        </button>
                        <input type="hidden" name="id" id="product_id" :value="product.id">
                        <input type="hidden" name="name" id="product_name" :value="product.slug">
                        <input type="hidden" name="NewPrice" id="product_NewPrice" :value="product.price">
                        <button type="button" id="addCArt" class="primary-btn add-to-cart"> Add to Cart</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                products: [],
                product: {
                    "id": '',
                    "slug": '',
                    "product_image_1": '',
                    "product_image_2": '',
                    "product_image_3": '',
                    "product_image_4": '',
                    "price": '',
                    "OldPrice": '',
                    "qty": '',
                    "stock_status": '',
                    "sku": '',
                    "short_description": '',
                    "description": '',
                    "product_links" : '',
                },
                product_slug: '',
                pagination: {},
            }
        },
        created() {
            this.fetchProduct();
        },
        methods: {
            fetchProduct(page_url) {
                //assign variable to this
                let vm = this;
                // check if page url exist, = page url else = /api/shop

                page_url = page_url || 'api/shop';

                fetch(page_url)
                    .then(res => res.json())
                    .then(res => {
                        vm.products = res.data;
                    })
                    .catch(err => console.log(err));
            },


        }
    }
</script>

现在的问题是，在注册组件之后，即使它成功获取了数据，它也没有显示，我可以在我的devTools中看到它

编辑

对不起，我...引导程序类visible-sm visible-xs，将产品隐藏在大屏幕上

Answer 1

一个问题是，当您尝试在v-for循环上绑定密钥时。密钥应该是循环中每个项目都唯一的东西：

https://vuejs.org/v2/guide/list.html#Maintaining-State

尝试这样的方法：

<div  v-for="(product,key) in products" v-bind:key="product.id"  class="col-md-4 col-sm-6 col-xs-6">

或者代替id，您可以使用保证在每个产品上都是唯一的任何其他属性。

就像亚当在评论中说的那样，另一个问题是，您已经在product属性中定义了data()，然后又在循环{{1}中调用了每个项目}。您应该分配互不冲突的唯一名称。

Vue组件已安装但未显示

1 个答案: