Рассчитать общую сумму продаж корзины покупок в laravel и vuejs
Я разрабатываю корзину для покупок с помощью 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"
Ответы 2
Вы можете создать вычисляемое свойство или метод для своего компонента. Там вы можете зациклить все предметы и добавить каждую цену к общей переменной. Затем вы возвращаете общую сумму.
Посмотрите здесь: Вычисленные свойства Vue
Кажется, что вычисляемые свойства будут работать лучше всего в вашем случае. Я не уверен, как структурированы данные в 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>
...
Посмотрите демо здесь (имитируется загрузка по сети, поэтому загрузка занимает две секунды carrito) и его код здесь.
Дополнительная информация о вычисляемых свойствах:
Не могли бы вы отредактировать свой вопрос, включив в него образец carrito? Возможно, его фактическая структура отличается, и поэтому вычисляемое свойство пришлось бы мне изменить.
Эта ошибка выходит [Vue предупреждает]: Ошибка при рендеринге: «TypeError: this.carrito.forEach не является функцией»
Итак, проблема была в том, что carrito изначально является массивом, но когда данные извлекаются через axios и carrito обновляется, он становится объектом. .forEach не работает с объектами, поэтому вы можете использовать Object.values, чтобы просто получить значения carrito, прежде чем перебирать их с помощью .forEach. Я обновил свой ответ соответственно. Теперь все должно работать нормально, но дайте мне знать, если это не так
Если вы заметили, я исправил это так (item) => (total + = parseFloat (item.price * item.quantity))
На самом деле, я только что обнаружил после экспериментов в консоли, когда вы умножаете числа как строки, они автоматически преобразуются в числа, поэтому вы должны иметь возможность вообще удалить все parseFloat. Я понятия не имел, что вы можете это сделать, но я думаю, что мы узнаем что-то новое каждый день :D.
Спасибо за ответ, я проверяю ваш ответ, ошибок нет, но мой результат остается на 0