Как подсчитать данные в чекбоксах при установке и удалении галочки?

Question

[Кир]

Всем привет, подскажите начинающему, как правильно работать с v-checkbox в vuetify.
Задача:
Список услуг, в массиве есть наименование услуги, описание и стоимость работ.

services: [
        {
          title: "Освобождение рабочей области жёсткого диска",
          description: "Подробное описание услуги 1",
          cost: 790,
          checked: false
        },
        {
          . . .
        },

Необходимо по установленному чекбоксу подсчитывать и отображать сумму, сумма должна меняться также при снятии галочки с чекбокса. Прибавлять я понял как, а вот отнимать как?
Вот код странички компонента:

spoiler

<template>
  <div class="pchelp">
    <v-container fluid class="my-5">
      <v-card class="pa-3">
        <v-card flat>
          <v-toolbar class="pt-2" color="primary" dark extended flat>
            <h1>
              Компьютерная
              <br>помощь
            </h1>
          </v-toolbar>

          <v-layout row pb-2>
            <v-flex xs8 offset-xs2>
              <v-card class="card--flex-toolbar">
                <v-toolbar card prominent>
                  <v-toolbar-title class="body-2 grey--text">Выберите раздел</v-toolbar-title>

                  <v-btn outline color="indigo">Общая помощь</v-btn>
                  <v-btn outline color="indigo">Оборудование</v-btn>
                  <v-btn outline color="indigo">Система</v-btn>
                </v-toolbar>

                <v-divider></v-divider>

                <v-card-text style="height: 1000px;">
                  <v-container>
                    <v-layout row wrap v-for="service in services" :key="service.title">
                      <v-card class="ma-1" style="min-width: 70%; margin: auto;">
                        <v-layout row wrap>
                          Сумма: {{ selectedSum }}
                          <v-flex md12>
                            <v-card-title class="primary white--text">
                              {{ service.title }}
                              <v-spacer></v-spacer>
                              <h2 class="white--text">
                                <v-checkbox
                                  @click="`{{ selectedSum += service.cost }}`"
                                  class="light--text"
                                  v-model="selected"
                                  :value="`${service.cost}`"
                                  :label="`${service.cost} руб.`"
                                ></v-checkbox>
                              </h2>
                            </v-card-title>
                            <v-expansion-panel>
                              <v-expansion-panel-content expand-icon="mdi-menu-down">
                                <template v-slot:header>
                                  <div>Подробнее</div>
                                </template>
                                <v-card>
                                  <v-card-text class="grey lighten-3">{{ service.description }}</v-card-text>
                                </v-card>
                              </v-expansion-panel-content>
                            </v-expansion-panel>
                          </v-flex>
                        </v-layout>
                      </v-card>
                    </v-layout>
                  </v-container>
                </v-card-text>
              </v-card>
            </v-flex>
          </v-layout>
        </v-card>
      </v-card>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedSum: 0,
      services: [
        {
          title: "Освобождение рабочей области жёсткого диска",
          description: "Подробное описание услуги 1",
          cost: 790,
          checked: false
        },
        {
          title: "Сохранение, перенос информации (за 1 Гб включительно)",
          description: "Подробное описание услуги 2",
          cost: 340,
          checked: false
        },
        {
          title: "Деление жесткого диска на разделы (за 1 раздел)",
          description: "Подробное описание услуги 3",
          cost: 550,
          checked: true
        },
        {
          title: "Форматирование жесткого диска (за 1 раздел)",
          description: "Подробное описание услуги",
          cost: 240,
          checked: false
        },
        {
          title: "Восстановление данных (случайно удаленные файлы и др.)",
          description: "Подробное описание услуги",
          cost: 750,
          checked: false
        },
        {
          title: "Дефрагментация жесткого диска",
          description: "Подробное описание услуги",
          cost: 50,
          checked: false
        }
      ],
      selected: [],
      methods: {
        selectedSummary: function() {
          return (this.selectedSum = this.selectedSum.reduce(
            (acc, item) => acc + item.value,
            0
          ));
        }
      }
    };
  }
};
</script>

<style lang="sass" scoped>

.card--flex-toolbar
  margin-top: -64px

.centered
  text-align: center
  margin: 0 auto
</style>

Answer 1

[0xD34F]

Обработчик клика с чекбоксов уберите, и сделайте вычисляемое свойство:

computed: {
  sum() {
    return this.selected.reduce((acc, n) => acc + +n, 0);
  },
},

Или, без дополнительного массива selected:

<v-checkbox
  class="light--text"
  v-model="service.checked"
  :label="`${service.cost} руб.`"
></v-checkbox>

computed: {
  sum() {
    return this.services.reduce((acc, n) => acc + n.cost * n.checked, 0);
  },
},

UPD. https://jsfiddle.net/w0vrxcyg/

Comments

[Кир]

Не хочет. Сделал как вы сказали, без массива selected, в chrome dev-tools вот что:


Пробовал вызывать так:
<p>Сумма: {{ sum() }}</p>
Чую, истина где то рядом :)

[0xD34F]

Кир, вычисляемые свойства вызывать не надо (если, конечно, не возвращаете функцию):

<p>Сумма: {{ sum }}</p>

Если что, добавил в ответ ссылку на демо.

[Кир]

0xD34F, Все работает огромное спасибо ВАМ!!! Дело было в лишней скобке

[Кир]

Подскажите а как добавить еще и список отмеченных заголовков? Описал задачу в песочнице: https://codepen.io/kirillz-the-styleful/pen/NZWOEd

[0xD34F]

Кир, "задачу"? То есть, для меня - задача. От вас. Типа, поставили задачу. Как в армии сержант перед рядовым. Морда не треснет? Идите оформляйте новый вопрос, где будет подробно рассказано чего вам надо, как вы свою проблему пытались решить, и что не получается.

[Кир]

Прошу пращения если задел.