Trying to incorporate Vue components within components without utilizing webpack for practical reasons is my current challenge. I have opted to use http-vue-loader for loading the vue files into my project.
Thus far, I have successfully created vue files and embedded them into my HTML as shown below:
main.js
new Vue({
el: '#app-shop',
components: {
'comp-products': httpVueLoader('components/comp-products.vue'),
'comp-shop': httpVueLoader('components/comp-shop.vue')
},
});
comp.shop.vue
<script>
module.exports = {
props:{
quantity: {
type: Number
}
}
}
</script>
comp.products.vue
<template>
<div id="products">
<div class="productsItemContainer" v-for="product in products">
<div class="productsItem">
<div class="">
<div class="mkcenter" style="position:relative">
<a class="item">
<img class="productImg" width="120px" height="120px" v-bind:src="'assets/products/' + product.image">
<div class="floating ui red label" v-if="product.new">NEW</div>
</a>
</div>
</div>
<div class="productItemName" >
<a>{{ product.name }}</a>
</div>
<div class="mkdivider mkcenter"></div>
<div class="productItemPrice" >
<a>€ {{ product.unit_price }}</a>
</div>
<div v-on:click="addToCart" class="mkcenter">
<div class="ui vertical animated basic button" tabindex="0">
<div class="hidden content">Koop</div>
<div class="visible content">
<i class="shop icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
module.exports = {
name: 'Products',
data() {
return {
products: [],
addToCart: function(){
// quantity++;
console.log("test")
console.log(quantity)
}
}
}
},
mounted() {
axios
.get("json/products.json")
.then(response => {
this.products = response.data.products;
});
}
}
</script>
<style>
#products{display:flex;flex-wrap:wrap;padding:20px}
.productsItemContainer{padding:5px;margin:auto;text-align: center}
.productsItem{width: 200px;padding:20px 0px 10px 0px;;border:1px solid #ddd}
.productsItem:hover{border:1px solid #ddd;-webkit-box-shadow: 0px 0px 13px -1px rgba(0,0,0,0.13);-moz-box-shadow: 0px 0px 13px -1px rgba(0,0,0,0.13);box-shadow: 0px 0px 13px -1px rgba(0,0,0,0.13);}
.item{width: 50%;margin: 0px}
.productImg{transition: all .5s ease-in-out;}
.productImg:hover{transform: scale(1.1);}
.productItemName{text-align: center}
.productItemName a{font: Roboto; color:#333745;font-size: 17px}
.productItemPrice{text-align: center; padding: 5px 0 10px 0; }
.productItemPrice a{color:red; font-size: 16px;font: Roboto; color:black; font-weight: 700}
</style>
The current setup is functioning well, but I am eager to discover a method to invoke comp.products.vue from within comp.shop.vue.