How to pass variable to vue.js component?

Question

Vue.js

I have a working code

<template>
    <div class="row no-margin catalog-content-wrap">

        <div class="col-md-4 col-sm-4 col-xs-6 mob-product" v-for="product in $parent.products">
            <div class="product" data-product-id="product.id"  onmouseenter="$(this).addClass('active')" onmouseleave="$(this).removeClass('active')" >
         
                <div class="product-link text-center">
                    <div class="img-wrap">
                        <a :href=" '/product/' + product.slug">
                            <img class="img-responsive" :src="Website.origin + '/uploads/thumbs/' + product.picture.name" />
                        </a>
                    </div>
                    <a class="product_name"   :href=" '/product/' + product.slug" :data-title="product.title">{{product.title }}</a>
                    <div class="price" v-if="product.price  > 0 && product.stock == 1">
                        <span>{{product.price}}</span> {{$parent.currency}}
                    </div>
                    <div class="product-other-info">
                        <a class="buy"  v-if="product.price  > 0 && product.stock == 1"  href="javascript:void(0);" onclick="Cart.add(this)" :data-product-id="product.id"><i class="fa fa-shopping-basket" aria-hidden="true"></i> {{$parent.loc.buy}}</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

I want to output everything from the block with the mob-product class into a separate component, at the output I get something like

<template>
    <div class="row no-margin catalog-content-wrap">
              <product v-for="product in $parent.products" ></product>
    </div>
</template>

and in the product template, work only with the product
variable, but for some reason js does not see the variable

Answer 1

You only create a list of product elements, and you also need to pass the necessary variable to the element itself:

<product v-for="product in $parent.products" :product="product"></product>