how do I import a Vue component into Vue and substitute a value?

Question

I'm new to VueJs. I need that in each page of a product the template was loaded, it, in principle, and is loaded, and ID of a product was substituted to a template

I am importing template.vue in its child Vue:

<template>
    <div id="app">
        <my-counter></my-counter>
    </div>
</template>

<script>
    import myCounter from './components/template.vue'

    export default {
        name: 'app',
        components: { myCounter }
    }

</script>

template.vue :

    <template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                     <div class="card-body">
                         <div v-for="product in products" class="row product-row">
<div v-if="product.id === count ">
                             <div class="col-md-4">
                                <img :src="product.picture" :alt="product.name">
                               </div>
                             <div class="col-md-8">
                                 <h2><b>{{ product.name }}</b></h2>
                                 <p>{{ product.price }}</p>
                               </div>
                            </div>
                         </div>
                     </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
 import axios from 'axios'
export default {
 name: 'somecomponent.vue', 
 props: { 
count: Number, 
// notice this is the same as the property passed in 
// value is the type to expect, Number, String, Object, etc
 },
        data() {
            return {
                products: [],

            }
        },

mounted() 
{ 
let vm = this
vm.getProducts(); 

},


methods: {
getProducts() {

                let vm = this
                axios.get('/api/products')
                    .then(function(response) {
                        vm.products = response.data.data  
                    })
           },
      },
}
</script>

How do I line <div v-if="product.id === 'N' " > substitute constant? For example: 5.

Answer 1

You can pass data to Vue components a few different ways. In your case its probably easiest to add a property to the component.

<template>
      <div id="app">
        <my-counter v-bind:count='myNum></my-counter>
      </div>
    </template>

    <script>
    import myCounter from './components/template.vue'

    export default {
      name: 'app',
      components: { myCounter },

      data: {
        myNum: 5
      }
    }

    </script>

And in the child:

<template>
  <div v-if="product.id === count">
</template>

<script>

export default {
  name: 'myComponent',
  props: {
    count: Number,
    // notice this is the same as the property passed in
    // value is the type to expect, Number, String, Object, etc
  }
}

</script>