在 laravel 和 vuejs 中计算购物车销售总额答案

【问题标题】：calculate shopping cart sale total in laravel and vuejs在 laravel 和 vuejs 中计算购物车销售总额
【发布时间】：2020-12-18 17:58:18
【问题描述】：

我正在使用 laravel 和 vuejs 开发一个购物车，我是编程新手。我想获取购物车中产品的总数量，但我不明白如何去做。任何帮助表示赞赏

我正在使用 vuejs 组件，在我的数据元素中，我有一个购物车，该购物车是装有产品的购物车。

<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>

在我的模板中，我有一个表格，它使用 v-for 指令遍历产品，我想将总数放在 a 中，但我不明白如何执行此操作

            <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>

所以我收到了数据

{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

【解决方案1】：

似乎计算属性最适合您的情况。我不确定carrito 中的数据是如何构成的，但假设它看起来像这样：

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

...您必须遍历carrito，将每个对象的precio 乘以cantidad，并将其添加到运行总数中。这是一个例子：

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

Object.values 返回一个只有carrito 的值的数组，然后被.forEach 遍历，它的precios/cantidads 相乘，然后添加到运行中总计，并返回。

total 将进入您的 Vue 实例中的 computed: {}。当相关数据发生变化时，计算的属性会被重新评估，所以只要carrito 发生变化，total 就会被重新评估。然后，您可以将其放置在页面中的任何位置，就像普通的数据属性一样：

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

查看演示here，（模拟网络抓取，因此加载carrito需要两秒钟）及其代码here。

更多关于计算属性的信息：

【讨论】：

感谢您的回答我正在检查您的答案，没有错误，但我的结果保持在 0
您能否编辑您的问题以包含carrito 的样本？也许它的实际结构不同，所以我必须修改计算的属性。
出现这个错误[Vue warn]: Error in render: "TypeError: this.carrito.forEach is not a function"
好的，所以问题是carrito最初是一个数组，但是当通过axios获取数据并更新carrito时，它变成了一个对象。 .forEach 不适用于对象，因此您可以使用 Object.values 获取 carrito 的值，然后再使用 .forEach 遍历它们。我已经相应地更新了我的答案。它现在应该可以正常工作了，但如果不行请告诉我
如果你注意到我这样更正它 (item) => (total + = parseFloat (item.price * item.quantity))

【解决方案2】：

您可以为组件创建计算属性或方法。在那里，您可以循环所有项目并将每个价格添加到总变量中。然后你返回总数。

看看这里：Vue computed properties

【讨论】：