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

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.