MAD 2 End Term 24 Dec 2023 — Question 23

1new Vue({
2  el: '#app',
3  template: `<div>
4  <div v-for="item in items">
5  Name:{{item.name}},Count:{{item.count}}, Price:
6{{item.price*item.count}}
7  <button @click="inscreeseCount(item)">Increese Count</button>
8  <button @click="addToCart(item)">Add To Cart</button>
9  </div>
10  Total Amount: {{amount}} <button @click="buy"> Buy </button>
11  </div>`,
12  data: {
13    cart: [],
14    totalAmount: 50,
15    items: [
16      { name: 'Apple', count: 1, price: 10 },
17      { name: 'Orange', count: 1, price: 5 },
18    ],
19  },
20  methods: {
21    buy() {
22      if (this.amount > this.totalAmount) {
23        console.log('Failure')
24      } else {
25        console.log('Success')
26        this.cart = []
27      }
28    },
29    inscreeseCount(item) {
30      item.count += 2
31    },
32    addToCart(item) {
33      this.cart.push(item)
34    },
35  },
36  computed: {
37    amount() {
38      let total = 0
39      this.cart.forEach((item) => {
40        total += item.count * item.price
41      })
42      return total
43    },
44  },
45})