Блог

Мне нужна ваша помощь, я создаю корзину покупок в laravel с помощью vuejs.

У меня следующая проблема, я новичок в vuejs, я вставляю продукты из компонента A, где моя форма в vue, я вставляю ее, но у меня нет ответа в моем компоненте B, где находится моя таблица, в которой зарегистрированы продукты, будьте осторожны, если вы добавите деталь, это то, что я должен перезагрузитьстраница, чтобы увидеть, что количество продуктов увеличилось.

Я использую EventBus от vuejs

Я надеюсь, что вы сможете мне помочь, спасибо за любую помощь

это моя форма

 <form method="post" v-on:submit.prevent>
    <input :value="csrf" type="hidden" name="_token" >
    <input :model="ProductSearch.id" name="id" type="hidden" class="form-control input-lg">
    <input :value="ProductSearch.name" name="name" type="hidden" class="form-control input-lg">
    <input :value="ProductSearch.sale_price" name="precio" type="hidden" class="form-control input-lg">
    <input :value="1" name="cantidad" type="number" class="form-control input-lg" min="1" style="text-align:center" >
    <button v-on:click="addproduct" class="btn btn-info btn-block" name="btnAccion" value="Agregar" type="submit"> Add</button>
</form>
 

Это мой метод

 addproduct: async function () {
        axios.post('sales/item', {
            id: this.id,
            name: this.name,
            precio: this.precio,
            cantidad: this.cantidad,
        })

        .then(function(response){
            
            EventBus.$emit('agregado', response.data)
        })
        
        .catch(error => {
            console.log(error.response);
        });
    } 
 

это моя таблица, в которой я отражаю свой результат.

 <tbody >
<tr v-for="(ProductCart, index) in carrito" :key="index.id">
<td>{{ProductCart.name}}</td>
<td>{{ProductCart.cantidad}}</td>
<td>{{ProductCart.precio}}</td>
<td>{{ProductCart.cantidad * ProductCart.precio}}</td>
<td> 
   <form  method="post">
   <input :value="csrf" type="hidden" name="_token" >
   <input type="hidden" name="id" id="id" value="" >
   <button  class="btn btn-danger" type="submit"> Remove</button>
</form>
</td>
</tr>
<tr>
<th colspan="2"></th>
<td>
<h5>Total</h5>
</td>
<td align="right">
<h5>{{ total }}</h5>
</td>
</tr>
</tbody>
 

scrip компонента таблицы

 data(){
        return{
            csrf: document.head.querySelector('meta[name="csrf-token"]').content,
            carrito: [],
        }
    },

created(){
    EventBus.$on('agregado', data => {
        this.carrito.push(data)
        

    })
},
 

в моей консоли я получаю сообщение об ошибке:
Ошибка в обработчике событий для «agregado»: «Ошибка типа: _this.carrito.push не является функцией»