Как установить флажок в Vue.js?

Question

Я пытаюсь получить общий балл, установив флажок на Vue.js, но я не могу вычесть из общего балла, когда установлен тот же флажок.

<template>
  <div class="container">
    <ul class="list-group" v-for="(data,key) in questionData" :key="key">
      <li class="list-item"   style="list-style-type:none;">
        <h3 class="title">{{data.title}}</h3>
      </li>
      <ul class="list-group" >
          <li class="list-question" v-for="(title,key) in data.questions" :key="key" style="list-style-type:none;"><input type="checkbox" @click="total(data.id, title.id)" :id="title.id" :value="title.question" v-model="selected">{{ title.question}} </li>
        </ul>
    </ul>
    <div class="alert">
      Toplam Puan : {{totalScore}}
    </div>
  </div>
</template>
<script>
import {dataMixin} from "./dataMixin"
  export default {
    mixins : [dataMixin],
    data () {
      return{
        checked : false,
        questionData : [],
        selected : [],
        totalScore : 0

      }
    },
    methods :{
     total(dataId,titleId){
      this.questionData.forEach(data => {

        data.questions.forEach(element => {
          if(dataId == data.id && titleId == element.id){

           this.checked = !this.checked;
            if (this.checked  == true){
              this.totalScore += element.score
            }
            else {
              this.totalScore -= element.score

            }

          }
        });

      });
     }

    },
    created(){
      this.getDataQuestions()
            .then(response => {

        this.questionData = response.data;
        console.log(this.questionData)
            })
    }
  }

</script>

Пример данных JSON

[
    {
        "id" : 1,
        "title" : "Sözleşme Doğrulaması",
        "questions" : [
            {
                "id" : 1,
                "question" : "Geliştirici tüm isterleri karşılayabileceği güvenini vermektedir.",
                "score" : 5
            },
            {
                "id" : 2,
                "question" : "İsterler tutarlı olup kullanıcı gereksinimlerini kapsamaktadır.",
                "score" : 5
            }
        ]
    }
]

Answer 1

По моему мнению, использование массива для хранения выбранных значений не очень хороший дизайн (использование логического checked хуже). У вас есть очень хорошая, функциональная структура объектов для ваших вопросов, и мы можем легко с ней работать.

Структуру вашего вопроса можно легко увидеть следующим образом:

[
    {
        "id" : 1,
        "title" : "Group 1",
        "questions" : [
            {
                "id" : 1,
                "question" : "A question",
                "score" : 5,
                "selected" : false
            },
            {
                "id" : 2,
                "question" : "Another question",
                "score" : 5,
                "selected" : false
            }
        ]
    },
    { ... }
]

Так что легко вычислитьобщий балл для каждой группы вопросов:

const groupScore = group.questions
  .reduce((score, question) => question.selected ? score + question.score : score, 0)

И как только у вас будет балл для каждой группы вопросов, вы можете рассчитать общий балл:

const totalScore = groupScoreArray.reduce((total, groupScore) => total + groupScore, 0)

Итак, учитывая структуру данных выше, вы можете использовать вычисленное свойство для вычисления общего балла.

<template>
  <div class="container">
    <ul class="list-group" v-for="(data, index) in questionData" :key="index">
      <li class="list-item"   style="list-style-type:none;">
        <h3 class="title">{{data.title}}</h3>
      </li>
      <ul class="list-group" >
          <li class="list-question" v-for="(title, qindex) in data.questions" :key="qindex" style="list-style-type:none;">
            <!-- Delete click event, bind data to title.selected -->
            <input type="checkbox" :id="title.id" v-model="title.selected">
            {{ title.question}}
          </li>
        </ul>
    </ul>
    <div class="alert">
      Toplam Puan : {{totalScore}}
    </div>
  </div>
</template>

  export default {
    data () {
      return {
        questionData : [{
          "id" : 1,
          "title" : "Sözleşme Doğrulaması",
          "questions" : [{
            "id" : 1,
            "question" : "Geliştirici tüm isterleri karşılayabileceği güvenini vermektedir.",
            "score" : 5
          }, {
            "id" : 2,
            "question" : "İsterler tutarlı olup kullanıcı gereksinimlerini kapsamaktadır.",
            "score" : 5
          }]
        }, {
          "id" : 2,
          "title" : "Sözleşme Doğrulaması",
          "questions" : [{
            "id" : 1,
            "question" : "Geliştirici tüm isterleri karşılayabileceği güvenini vermektedir.",
            "score" : 2
          }, {
            "id" : 2,
            "question" : "İsterler tutarlı olup kullanıcı gereksinimlerini kapsamaktadır.",
            "score" : 3
          }]
        }]
      };
    },
    computed: {
      totalScore() {
        const scoreMap = this.questionData.map(questionItem =>
          questionItem.questions.reduce((sum, q) => {
            return q.selected ? sum + q.score : sum
          }, 0));
        return scoreMap.reduce((sum, score) => sum + score, 0);
      }
    }
  }

Это рабочий пример в моей локальной среде (vue@2.6.10,vue-cli@4.0.0), и вот кодекс: https://codepen.io/jasminexie/pen/pooRaNr