<div id="app">
  <div class="sum">
    <p>Сумма: {{ sum }} <br>
  Вами отмечены:
    <ul>
      <li v-show="service.checked" v-for='service ,index in services'>{{service.title}}</li>
    </ul>
  </p>

  </div>
  
           
  <v-app>
    <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>
  
            </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" @click="showEquipment()">Общая помощь</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>
                            <v-flex md12>
                              <v-card-title class="primary white--text">
                                {{ service.title }}
                                <v-spacer></v-spacer>
                                <h2 class="white--text">
                                  <v-checkbox
                                    class="light--text"
                                    v-model="service.checked"
                                    :label="`${service.cost} руб.`"
                                  ></v-checkbox>
                                  <!--<v-checkbox
                                    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>
  </v-app>
</div>

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

.centered
  text-align: center
  margin: 0 auto

.sum
  color: white
  position: fixed
  font-size: 20px
  z-index: 10000
  background: red
  display: block
  li
    list-style-type: none

new Vue({
  el: '#app',
  data() {
    return {
      services: [
        {
          title: "Освобождение рабочей области жёсткого диска",
          description: "Подробное описание услуги 1",
          cost: 790,
          checked: true
        },
        {
          title: "Сохранение, перенос информации (за 1 Гб включительно)",
          description: "Подробное описание услуги 2",
          cost: 340,
          checked: false
        },
        {
          title: "Деление жесткого диска на разделы (за 1 раздел)",
          description: "Подробное описание услуги 3",
          cost: 550,
          checked: false
        },
        {
          title: "Форматирование жесткого диска (за 1 раздел)",
          description: "Подробное описание услуги",
          cost: 240,
          checked: false
        },
        {
          title: "Восстановление данных (случайно удаленные файлы и др.)",
          description: "Подробное описание услуги",
          cost: 750,
          checked: false
        },
        {
          title: "Дефрагментация жесткого диска",
          description: "Подробное описание услуги",
          cost: 50,
          checked: false
        }
      ],
      
    };
  },
  computed: {
    sum() {
      //return this.selected.reduce((acc, n) => acc + +n, 0);
      return this.services.reduce((acc, n) => acc + n.cost * n.checked, 0);
    },
    
    getTitleSelected() {
      //let title = '';
      //for(let index in this.services) {
      //  title[index];
      //}
      //return title;
    }
  },
})