How to make a sum of value in data with Vue.js and use it in of v-if? - vue.js

Question

I want to make a function to sum up the value in data with vue.js but I don't know how to code it.
var quiz = {
questions: [
{
text: "who am I?",
responses: [
{ text: "John", value: 1000 },
{ text: "James", value: 2000 },
{ text: "Lucy", value: 3000 },
{ text: "Mari", value: 4000 }
]
},
{
text: "What do you want to be?",
responses: [
{ text: "first selector", value: 10 },
{ text: "second selector", value: 20 },
{ text: "third selector", value: 30 },
{ text: "fourth selector", value: 40 }
]
},
{
text: "How old are you?",
responses: [
{ text: "first selector", value: 10 },
{ text: "second selector", value: 20 },
{ text: "third selector", value: 30 },
{ text: "fourth selector", value: 40 }
]
}
]
}
and html code
<template v-if="resultOne">
<p>First result</p>
</template>
I had a following data like this, and I want to make some v-if code by using the value of them.
For example, if the sum of value become 1020, 1030, 1040, and 1050, I want to show "resultOne."
How can I make a code like this?

Answer 1

It's difficult to give you a complete answer as I don't know where quiz is coming from. Is it hardcoded or is it dynamic?
But either way, here is a method you can use to calculate the total value of the data:
const totalValue = quiz.reduce((total, item) => {
const itemSum = item.responses.reduce((sum, response) => {
return sum + response.value;
}, 0);
return total + itemSum;
}, 0);
If the data is static then I would suggest just doing the calculation inside a created() hook and storing it in a data prop.
like:
data() {
return {
totalValue: 0
}
},
created() {
this.calculateValue();
},
methods: {
calculateValue() {
this.totalValue = quiz.reduce((total, item) => {
const itemSum = item.responses.reduce((sum, response) => {
return sum + response.value;
}, 0);
return total + itemSum;
}, 0);
}
}
and then your v-if is simply v-if="[1020, 1030, 1040, 1050].includes(totalValue)"
If quiz is more dynamic then you can try to use a computed method.