Vuejs：如果否则为布尔值，如何将其设为？

Question

我有一个带有按钮的组件，当我们单击它们时会显示一些元素（v-autocomplete），但我应该使用布尔值来简化代码，我该怎么做？

因为实际上，它在 showCompetence 状态下将项目的索引添加到一个数组中，但我只想在每个索引上添加一个布尔值基本上在“方法”中的“openCompetence”函数中。

import { mapGetters, mapActions } from "vuex";

export default {
    name: "SkillCvCard",
    data() {
        return {
            selectedCompetence: []
        }
    },
    updated() {
        this.addSelectSkill(this.userCompetences.competences.list);
        console.log(this.selectedSkills)
    },
props: {
        userCompetences: {
            type: Array
        },
        showCompetence: {
            type: Array
        }
    },

computed: {
        ...mapGetters(["selectedSkills"]),
        console: () => console,
    },

methods: {
...mapActions(['addSelectSkill']),
openCompetence(index) {
    if (this.showCompetence.includes(index)) {
        console.log("close")
        this.showCompetence.splice(this.showCompetence.indexOf(index), 1)
    } else {
        this.showCompetence.push(index)
        console.log("open")
    }

    console.log(this.showCompetence)
}
}

关于模板我只添加最低限度我希望它会好的：

第一个是我们点击的地方，启动“openCompetence”功能。

<div v-for="(competences, index) of userCompetences.competences" :key="index">
        {{ competences.category }} <v-btn @click="openCompetence(index)"> Add </v-btn>
</div>

剩下的是一个v-container和一个v-for，包括多个v-autocomplete，但里面最重要的是v-if：

<div class="skill-field" v-for="(skill, index) of userCompetences.competences" :key="index">
                                <template>
                                <v-flex md12 sm12 xs12 v-if="skill.list.length>0">
                                    <v-autocomplete
                                    v-if="showCompetence.includes(index)"
                                    v-model="userCompetences.competences.list"
                                    :items="skill.list"
                                    chips
                                    hide-selected
                                    :label="skill.category"
                                    item-text="name"
                                    item-value="name"
                                    multiple
                                    >
</v-autocomplete>
</v-flex>
</template>
</div>

Answer 1

通常，您会使用计算属性来解决此类问题。但是，因为您在 v-for 内部，所以计算属性有点困难，因为您无法在 v-for 的 index 的每个值的上下文中评估它。

有两种常见的选择：

1. 做你正在做的事。它实际上并没有降低效率，因为除非它依赖的数据发生变化，否则它不会重新评估。

2. 添加一个类似于competencesDisplayState 的计算函数，它返回一个与userCompetences.competences 数组在v-for 中的排序相匹配的布尔数组。然后你的 v-if 可以变成这样：

v-if="competencesDisplayState[index]"

我通常只选择第一种方法，因为它更简单，更易于阅读和维护。

如果你想走路线 2，这里有一些用于计算能力显示状态的代码：

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