How to check checkbox in Vue.js? - vue.js

Question

I'm trying to get the total score by checking the checkbox on Vue.js, but I can't subtract from the total score when the same checkbox is clicked.
<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>
Example JSON data
[
{
"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

In my opinion using an array to store selected values is not a good design (using a checked boolean is worse). You have a very nice, functioning object structure for your questions and we can easily work with that.
Your question structure can easily be viewed as this:
[
{
"id" : 1,
"title" : "Group 1",
"questions" : [
{
"id" : 1,
"question" : "A question",
"score" : 5,
"selected" : false
},
{
"id" : 2,
"question" : "Another question",
"score" : 5,
"selected" : false
}
]
},
{ ... }
]
So it's easy to calculate the total score for each question group:
const groupScore = group.questions
.reduce((score, question) => question.selected ? score + question.score : score, 0)
And once you have the score for each question group, you can calculate the total score:
const totalScore = groupScoreArray.reduce((total, groupScore) => total + groupScore, 0)
So, given the data structure above, you can use a computed property to calculate total score.
<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);
}
}
}
This is a working example in my local environment (vue#2.6.10, vue-cli#4.0.0), and here is a codepen: https://codepen.io/jasminexie/pen/pooRaNr