Попытка увеличить данные с помощью функции

Question

Я пытаюсь увеличить свойство данных с помощью функции, однако код не позволяет мне.Мне интересно, что я здесь не так делаю?Логика выглядит правильной по большей части, но я все еще новичок в Vue, поэтому я не могу понять это.Мне было интересно, может ли кто-нибудь помочь мне с этим предметом.Мне также было интересно, есть ли способ сделать код более элегантным.В основном для каждого переключения я хотел бы, чтобы цена увеличивалась или уменьшалась, и цена будет той ценой, которую клиент может заплатить в зависимости от того, что выбрал клиент.

    <div id="app">
                <button @click="toggle1">1</button>
                <button @click="toggle2">2</button>
                <button @click="toggle3">3</button>
                <button @click="toggle4">4</button>
                <button @click="toggle5">5</button>
                <button @click="toggle6">6</button>

                {{ price }}
            </div>
        <script src="https://unpkg.com/vue"></script>
        <script>
        let app = new Vue({
            el: '#app',
            data: {
                oneActive: false,
                twoActive: false,
                threeActive: false,
                fourActive: false,
                fiveActive: false,
                sixActive: false,
                price: 0,
                oneprice: 20,
                twoprice: 50,
                threeprice: 30,
                fourprice: 40,
                fiveprice: 30,
                sixprice: 40
            },

            methods: {
                toggle1() {
                    if (this.oneActive = false){

                    this.price += this.oneprice;
                    this.oneActive = true;

                    }
                    else if (this.oneActive = true){

                        this.price -= this.oneprice
                        this.oneActive = false;
                    }
                },
            }

        });

        </script>

Answer 1

Вот более элегантный способ написать это:

<template>
  <div>
    <button v-for="(item, index) in items" :key="index" @click="toggleItem(index)">
      {{ item.name }}
    </button>
    <p>{{ totalPrice }}</p>
  </div>
</template>

export default {
  data() {
    return {
      items: [
        { price: 20, name: 'item 1', isActive: false },
        { price: 40, name: 'item 2', isActive: false },
        { price: 60, name: 'item 3', isActive: false },
      ],
    };
  },
  computed: {
    totalPrice() {
      return this.items.filter(item => item.isActive).reduce((a, b) => a + b.price, 0);
    },
  },
  methods: {
    toggleItem(index) {
      this.items[index].isActive = !this.items[index].isActive;
    },
  },
};

Главное, что вы можете вызывать методы с аргументами из вашего шаблона.