更新laravel和vuejs中购物车中现有产品的数量

我正在vuejs中构建一个购物车，当我添加产品时，有人可以帮助我再次插入，而不是增加数量。 谢谢

组成部分1 这是我的桌子主体，我在那里渲染我的购物车

<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"  value="" >
            <button  class="btn btn-success" 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>

添加产品的方法

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

    })
    .then(function(response){
        
        EventBus.$emit('agregado', response.data)

    })
    .catch(error => {
        console.log(error.response);
    });

},

---

你想要达到的目标不是很清楚。你能重新表述一下你想做什么，以及当你试图去做的时候到底发生了什么吗？你想实现什么还不是很清楚。你能重新表述一下你想做什么，以及当你试图做的时候到底发生了什么吗？

<button v-on:click="addproduct" class="btn btn-info btn-block" type="submit"> Add</button>

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

    Productos:{
        id: 1,
        name: 'producto 3',
        precio: 1,
        cantidad: 1,
    }
}
},

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

    })
    .then(function(response){
        
        EventBus.$emit('agregado', response.data)

    })
    .catch(error => {
        console.log(error.response);
    });

},