calculate shopping cart sale total in laravel and vuejs

user_14250179 0
Viewed 436

i'm developing a shopping cart with laravel and vuejs i'm new to programming. I want to get the total amount of the products in the shopping cart but I don't understand how to do it. any help is appreciated

I am using vuejs components, in my data element I have a cart that is the one who has the cart with the products.

<script >
import Axios from 'axios'
export default {
    data(){
        return{
            csrf: document.head.querySelector('meta[name="csrf-token"]').content,
            carrito: [],
        }
    },
    mounted(){
        Axios.get('carrito')
        .then(Response => {this.carrito = Response.data})
    },
}
</script>

Inside my template I have a table where it traverses the products with the v-for directive, I would like to have the total in a but I don't understand how I can do this operation

            <table class="table">
                <thead>
                    <tr>
                    <th scope="col">Producto</th>
                    <th scope="col">Cantidad</th>
                    <th scope="col">precio</th>
                    <th scope="col">total</th>
                    <th scope="col">accion</th>
                    </tr>
                </thead>
                <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 action="" method="post">
                                <input :value="csrf" type="hidden" name="_token" >
                                <input type="hidden" name="id" id="id" value="<?php echo $producto['id'] ?>" >
                                <button  name="btnAccion" value="Eliminar" class="btn btn-danger" type="submit"> Remove</button>
                            </form>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                     <tr>
                        <th colspan="2"></th>
                        <td>
                        <h2>Total</h2>
                        </td>
                        <td align="right">
                        <h3>  </h3> 
                        </td>
                    </tr>
                </tfoot>
            </table>

so I receive the data

{1: {id: "1", name: "Motor 1", cantidad: "1", precio: "20.00"}}
1: {id: "1", name: "Motor 1", cantidad: "1", precio: "20.00"}
cantidad: "1"
id: "1"
name: "Motor 1"
precio: "20.00"
laravel vue.js
2 Answers

You could create a computed property or a method for your component. There you could loop all the items and add each price to a total variable. Then you return the total.

Have a look here: Vue computed properties

user_56104470

It seems like computed properties would work best in your case. I'm not sure how the data in carrito is structured, but assuming it looks something like this:

carrito: {
   1: {
      "id":"1",
      "name":"Motor 1",
      "cantidad":"1",
      "precio":"20.00"
   }
   ...
}

...you would have to loop through carrito, take the precio times the cantidad of each object, and add it to a running total. Here's an example:

total: function () {
  let total = 0;
  Object.values(this.carrito).forEach(
    (item) => (total += item.precio * item.cantidad)
  );
  return total;
}

Object.values returns an array of just the values of carrito, which is then iterated through by .forEach, and its precios/cantidads are multiplied together, and then then added to the running total, and returned.

total would go in computed: {}, within your Vue instance. Computed properties are re-evaluated when dependant data changes, so total will be reevaluated whenever carrito changes. You can then place it wherever you want in the page, like a normal data property:

...
<tfoot>
  <tr>
    <th colspan="2"></th>
    <td>
      <h2>Total</h2>
    </td>
    <td align="right">
      <h3>{{ total }}</h3>
    </td>
  </tr>
</tfoot>
...

demo

Check out the demo here, (network fetching is simulated, so it takes two seconds to load carrito) and its code here.

More info on computed properties:

user_84023690
Related