Passing data throw controllers not working propertly
I'm mixing Laravel and Vue (it's awesome!) on an eCommerce platform. I get a collection of Products from PHP and add to a list of available products. I want to add an article to a shopping cart when the button "Add to cart" is clicked. Nothing new at all.
Well, I've built 2 templates, one for the products list and other for the cart. This is the code:
<div id="app">
<products list="{{ json_encode($products) }}"></products>
<cart list=""></cart>
<template id="products-template">
<div v-for="product in list">
@{{ product.title }}
<button @click="addProduct(product)">{{ _('Add product') }}</button>
<hr>
</div>
</template>
<template id="cart-template">
<ul v-for="product in list">
<li id="@{{ product.id }}">@{{ product.title }}</li>
</ul>
</template>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.14/vue.js"></script>
<script>
Vue.component('products', {
template: '#products-template',
props: ['list'],
methods: {
addProduct: function (product) {
this.$dispatch('added-new-product', product)
}
},
created() {
this.list = JSON.parse(this.list);
}
});
Vue.component('cart', {
template: '#cart-template',
props: ['list'],
events: {
'added-new-product': function(product) {
this.list.push = product
}
},
created() {
this.list = []
}
});
new Vue({
el: "#app",
events:{
'added-new-product' : function(product){
this.$broadcast('added-new-product', product);
}
}
});
</script>
So the shopping cart list is empty at the beggining and the event of pressing a button goes up to the parent (div #app) and comes down to the cart thanks to the event added-new-product.
The funny thing is that I thake a product as an array of objects in the right format (checked on dev. tools) and this format bubbles to the cart template but does not add the product to the cart list accordingly. In spite of this, it creates 10 empty
tags.Any idea what could be wrong? thanks!
Please or to participate in this conversation.