Как найти общую сумму товаров в корзине?

1. Для того чтобы найти общую сумму товаров в корзине, необходимо пройти по всем товарам в корзине и сложить их цены. В каждом товаре должно быть указано его количество и цена. Например, если у вас есть массив объектов в корзине, вы можете пройти по нему с помощью метода reduce и сложить цену товара умноженную на его количество:

```javascript
const cartItems = [
  { name: 'item1', price: 10, quantity: 2 },
  { name: 'item2', price: 20, quantity: 1 },
  { name: 'item3', price: 5, quantity: 3 },
];

const totalSum = cartItems.reduce((acc, item) => {
  return acc + (item.price * item.quantity);
}, 0);

console.log(totalSum); // выводит общую сумму товаров в корзине
```

2. Для организации вложенности компонентов во Vue следует создать иерархию компонентов:

- App.vue будет основным компонентом, содержащим главную логику приложения и необходимые данные.
- Drawer.vue будет компонентом, отвечающим за отображение боковой панели (например, корзины) в приложении.
- CartItemList.vue будет компонентом, отображающим список товаров в корзине и передающим данные о товарах в компоненты CartItem.vue.
- CartItem.vue будет компонентом, отображающим отдельный товар в корзине и получающим данные о товаре из родительского компонента CartItemList.vue.

Пример структуры компонентов во Vue:

```html
<!-- App.vue -->
<template>
  <div>
    <Drawer />
  </div>
</template>

<script>
import Drawer from './components/Drawer.vue';

export default {
  components: {
    Drawer,
  },
};
</script>

<!-- Drawer.vue -->
<template>
  <div>
    <CartItemList />
  </div>
</template>

<script>
import CartItemList from './CartItemList.vue';

export default {
  components: {
    CartItemList,
  },
};
</script>

<!-- CartItemList.vue -->
<template>
  <div>
    <CartItem v-for="item in cartItems" :key="item.id" :item="item" />
  </div>
</template>

<script>
import CartItem from './CartItem.vue';

export default {
  components: {
    CartItem,
  },
  data() {
    return {
      cartItems: [
        { id: 1, name: 'item1', price: 10 },
        { id: 2, name: 'item2', price: 20 },
      ],
    };
  },
};
</script>

<!-- CartItem.vue -->
<template>
  <div>
    <p>{{ item.name }} - ${{ item.price }}</p>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
  },
};
</script>
```

Таким образом, компоненты CartItemList.vue и CartItem.vue будут вложены в компонент Drawer.vue, а компонент Drawer.vue будет вложен в главный компонент App.vue. Каждый компонент будет отвечать за свою часть интерфейса и логику, что упростит поддержку и разработку приложения.

<blockquote><code class="javascript">item.isAdded = true</code></blockquote> <br/> Это как, одни и те же объекты используются и в списке товаров, и в корзине? Можете начинать думать, как будете переделывать, чтобы такой ерунды не было. Ну а пока попробуем заставить ваш говнокод <a href="https://play.vuejs.org/#eNqlV9tuG0UYfpVhVcmb4tg5iBvjRKWlSEHQFgrc1JW63h0n26x3lz24qSxLbSrUSq3UGy4QgkqIF0hLq0YpCa8w+wo8Cd8/s4fZtZMUuLA0+5/nP3z/eGp8EoadScqNntGP7cgNExbzJA03B747DoMoYZ9G1j0esVEUjFmr01WfpNL6uJSZsoiP2iyMgonr8Dazg3GYJtxhs1wvFx/4duDHCbMtKG2Qknlr4DPou06PrZIF1+Y4rbTZ96nlJ25yH19s1q6k1kqptZrUWk1qvZRar0mtS6nbS1owSZBY3g0SRkhF5Ka5xDY2ZaCdieWlvBNxJ7W5aVq23Wa+5OLIPmR+R3piF3EqHLXZypLuIw0dK+Ff5Vz4Md2Ej6vApDkilRYgUxxhR1mJ+DiY8M+Q0SsqgaTRCDMOPQRjahTXd/je9ZH0uNRmqyquvFZmiyRbbTal3NFZJrHuSZLqVwBpRob6XdU16Bd8wEPoQQpfjPXzzunJBC/LJG0MjCrdA4N1IdnvampG20hi3HbkbnfuxoGPvpSRDQyqjOvx6HqYuMjGwOipmIlneV5w73NJS6KUy3ilzg63dxfQ78Z7RBsYNyIe82iCUEpeYkXbPFHsqzev8T2cS+Y4cFIP0mcwv+Zx4KUUoxK7nPoOwtbkZLRbcnJcf/ub+Opewv24uBQFSpKqmwcGRufKGVevwl3vrEs9VAZZrOb09NGm2m4h+V+4aK5iwHViY8y3/FFw2Qvs3VK4pMwBguvf5XZyGgCg+8IYDezwkevzG/Rl5leq+qPHrqXjIY+KXiuUpwo/ZjQA0kvexLqM7XHLz6ekOcog3bp9Tu867kQeakf1wSbL7giN/IG06HF/O9kZGKUIhMqsVDTcy0086n/xszjJHoi34lAciwMm/soeZQ+zfXGQPR8YuoLDVXgoOan9KE7ES3EgXmXPIP2GZT/Azn72nImX2VMG5mtxnD2CPVh6QIcjeDmB6YfgvcLvqM2yx1CFGSiA/Fq8Ee8gvZ89Y4jnQBzh97ajR0HzmV+qW8tDrXU0KS0/p6ZHNyQJcWj5m+InGdsf4qSHwhClJkNK9Rgkebg5neoIPpuxv/eP+92h7rCh1h+mSRL47JINqNylSItmQZziRfZYHMqKHKrMHFX1yh7BslRemJfqXJya2NYcrvNnc24um5OmRuCUOVOj0m7ieXMfLRyl9xyPIq4iIZPlURAhqT4sSu9VP02Wh1hGxKtovV1+nygd16mIl1R8vWIDQqAesem32QU+4X6ypGmpW0K4fl3TL4VUp55XnbMrg5zmjwTK6+hfQxw9T0pgy3Ghx24mEZaBpOQPF03GHVvb/NvIq4mNrb3vCM5qkvB1DnpqDwwV2peBwz2zVdBrMFr4gPBHK+U7pHIy/2IqzORQe1HlQT2RyLKywKMoiPIXoJ96nu4z8Ld8WCyBW71M8nZWVqlftdcREjRipmL18cAptmMjlg22KoWZcl9SW+JX4Kn4E3B4DHB9Qh8SThUcUVGxVhn3Yq452iyTc7q/QmKh2zviF8JcAPEhfB+Id9kz6RLeATlA5kMg0RuJRIDvHrswLczN7ugh5c7rximpSgjl15LLxy5lVlX+Kj5i8xZrqXlpMfku/i9rcYiFa8UxRg8QSohMTQ0w1oG4gfvyU/wmQZ8SQKsKeNvLMV29qSs4nwNxqf5CrU4ki9RL5bJtoZ89yfY7Cy141pB7tXVCu3ku8bV941Jr6hRCNTz8uIe7F/Wv73EAk9SCQN7aTX5yPyTU8uW8Npljl9b/6hzZ2iPyysoChlq6YK83mSilzXcCz+EE0Q2j80u5WOWyt1Rl1eRSZRs7ut9t5lOVKF/rRWk07DijuM0NTW1rFm0KNN8Uv2NAqe75kj4Ub+ub+un/3NS1l+2CZXA6yGOeZPvjT1VLe8O9x3TtrNVnB9/l1IGhGZPsRYHP/gHVxp89" rel="nofollow">вести себя должным образом</a> : <br/> <br/> <blockquote><code class="javascript">const quantity = ref(1)</code></blockquote> <br/> Что, закрыли корзину и потеряли данные о количестве? Пусть количество будет свойством элемента массива, представляющего корзину, соответственно, приходит сверху, и туда же отправляется новое: <br/> <br/> <code class="javascript">const quantity = defineModel('quantity');</code> <br/> <br/> В родителе ловим это новое количество и дёргаем метод обновления: <br/> <br/> <pre><code class="html">&lt;CartItem
  v-for="n in cart"
  v-bind="n"
  :key="n.id"
  @update:quantity="updateQuantity(n, $event)"
  @remove="removeFromCart(n)"
/&gt;</code></pre> <br/> Откуда этот метод возьмётся? Оттуда же, откуда и методы добавления (этот вам придётся поправить самостоятельно, при добавлении в корзину надо задавать количество по умолчанию, типа единица) и удаления, делаем по аналогии: <br/> <br/> <pre><code class="javascript">const updateQuantity = (item, quantity) =&gt; item.quantity = quantity;</code></pre> <br/> Ну и наконец, исправленный расчёт суммы, цену надо умножать на количество: <br/> <br/> <pre><code class="javascript">const totalPrice = computed(() =&gt; cart.value.reduce((acc, n) =&gt; acc + n.price * n.quantity, 0));</code></pre>