[Vuejs]-Vuejs: How to make this if else as Boolean?

by

0👍

Normally, you would use a computed property to solve a problem like this. However, because you are inside of a v-for, a computed property is a little more difficult since you can’t evaluate it in the context of each value of the v-for‘s index.

There are two common options:

  1. Do exactly what you are doing. It’s actually no less efficient since it will not re-evaluate unless data it depends on changes.

  2. Add a computed called something like competencesDisplayState that returns an array of booleans that matches the ordering of the userCompetences.competences array in the v-for. Then your v-if can become something like:

v-if="competencesDisplayState[index]"

I normally just opt for the first approach as it is simpler and is easier to read and maintain.

If you want to go route 2, here’s some code for the competencesDisplayState computed:

        competencesDisplayState: () => {
            var result = [];
            for (var index=0;index < this.userCompetences.competences.length;++index) {
                result(this.showCompetence.includes(index));
            }
            return result;
        }

Leave a comment