Vue компонент установлен, но не отображается

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

EDIT

Глупый я ... Классы начальной загрузки 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(), а затем вы также вызываете каждый элемент в цикле product. Вам следует назначать уникальные имена, которые не конфликтуют друг с другом.