Question

我正在用 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"

Answer 1

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

看看这里：Vue computed properties

Answer 2

似乎计算属性最适合您的情况。我不确定 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 将进入 computed: {}，在您的 Vue 实例中。当相关数据发生变化时会重新评估计算属性，因此每当 total 更改时都会重新评估 carrito。然后你可以把它放在页面中任何你想要的地方，就像一个普通的数据属性：

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

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

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

计算 laravel 和 vuejs 中的购物车销售总额

2 个答案: