Vuejs: Как сделать это, если еще как Boolean? - PullRequest
Новая
       3

Vuejs: Как сделать это, если еще как Boolean?

0 голосов
/ 04 марта 2020

У меня есть компонент с кнопками, которые показывают некоторые элементы (v-autocomplete), когда мы нажимаем на них, но я должен сделать это с логическим значением, чтобы упростить код, как я могу это сделать?

Потому что на самом деле, он добавляет индекс элемента в одном массиве в состоянии showCompetence, но я просто хотел бы иметь логическое значение для каждого индекса В основном в функции "openCompetence" в "Методах". Я просто добавлю минимум, я надеюсь, что все будет в порядке:

Во-первых, где мы нажимаем, чтобы запустить функцию "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>

1 Ответ

0 голосов
/ 04 марта 2020

Обычно вы используете вычисляемое свойство для решения такой проблемы. Однако, поскольку вы находитесь внутри v-for, вычисляемое свойство немного сложнее, поскольку вы не можете оценить его в контексте каждого значения v-for 'index.

Есть два общих варианта:

  1. Делайте именно то, что вы делаете. На самом деле он не менее эффективен, поскольку не будет переоценивать, если только данные не зависят от изменений.

  2. Добавить вычисляемое имя с именем, например competencesDisplayState, которое возвращает массив логических значений, соответствующих порядку массива userCompetences.competences в v-for. Тогда ваш v-if может стать чем-то вроде: 

v-if="competencesDisplayState[index]"

Обычно я просто выбираю первый подход, так как он проще, его легче читать и поддерживать.

Если вы хотите go маршрут 2, вот код для вычисленных компетенцийDisplayState: 

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