Помоги мне, пожалуйста сложить значения из этого Quiz Я использую vue.js
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<section class="container">
<!--quizHydroSystems-->
<div class="questionBox" id="app">
<div class="questionContainer" v-if="questionIndex<quiz.questions.length" v-bind:key="questionIndex">
<div class="services">
<div class="services__item"
v-for="(response, index) in quiz.questions[questionIndex].responses",
@click="selectOption(index)"
v-bind:class="{ 'is-selected': userResponses[questionIndex] == index}"
:key="index">
{{ index | charIndex }}. {{ response.text }}
</div>
</div>
<footer class="questionFooter">
<nav class="pagination" role="navigation" aria-label="pagination">
<!-- back button -->
<a class="button" v-on:click="prev();" :disabled="questionIndex < 1">
Înapoi
</a>
<!-- next button -->
<a class="button" v-bind:class="(userResponses[questionIndex]==null)?'':'is-active'" v-on:click="next();" :disabled="questionIndex>=quiz.questions.length">
{{ (userResponses[questionIndex]==null)?'Evită':'Înainte' }}
</a>
</nav>
</footer>
</div>
<transition>
<div v-if="questionIndex >= quiz.questions.length" v-bind:key="questionIndex" class="quizCompleted has-text-centered">
<!-- quizCompletedIcon: Achievement Icon -->
<span class="icon">
<i class="fa" v-bind:class="score()>3?'fa-check-circle-o is-active':'fa-times-circle'"></i>
</span>
<h2 class="title">
Окончательная сумма {{ (score()>7?'an amazing':(score()<4?'a poor':'a good')) }} job!
</h2>
<p class="heading">
Итоговая сумма: {{ score() }} / {{ quiz.questions.length }}
</p>
<br>
<a class="button" @click="restart()">С самого начала <i class="fa fa-refresh"></i></a>
</div>
</transition>
</div>
</section>
<script src="vuejs.js"></script>
</body>
</html>
var quiz = {
user: "Alex",
questions: [
{ //--------------------------------------------------------------------------
text: "Sursa de apâ",
responses: [
{
text: "Centralizată" ,
name: 'Sursa de apă',
price: 300,
active: true
},
{
text: "Fîntînă" ,
name: 'Sursa de apă',
price: 300,
active: true
},
]
},
{ //--------------------------------------------------------------------------
text: "Numărul de loturi",
responses: [
{
text: "1" ,
name: 'Numărul de loturi',
price: 300,
active: true
},
{
text: "2" ,
name: 'Numărul de loturi',
price: 300,
active: true
},
]
},
]
},
userResponseSkelaton = Array(quiz.questions.length).fill(null);
var app = new Vue({
el: "#app",
data: {
quiz: quiz,
questionIndex: 0,
userResponses: userResponseSkelaton,
isActive: false
},
filters: {
charIndex: function (i) {
return String.fromCharCode(97 + i);
}
},
methods: {
restart: function () {
this.questionIndex = 0;
this.userResponses = Array(this.quiz.questions.length).fill(null);
},
selectOption: function (index) {
Vue.set(this.userResponses, this.questionIndex, index);
//console.log(this.userResponses);
},
next: function () {
if (this.questionIndex < this.quiz.questions.length)
this.questionIndex++;
},
prev: function () {
if (this.quiz.questions.length > 0) this.questionIndex--;
},
// Return "true" count in userResponses
score: function () {
var score = 0;
for (let i = 0; i < this.userResponses.length; i++) {
if (
typeof this.quiz.questions[i].responses[
this.userResponses[i]
] !== "undefined" &&
this.quiz.questions[i].responses[this.userResponses[i]].correct
) {
score = score + 1;
}
}
return score;
// return this.userResponses.filter(function(val) { return val }).length;
}
}
});