[Vuejs]-How to check checkbox in Vue.js?

by

0👍

✅

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

Leave a comment