Template: <Div

Question

Template: <Div

:class="getCategoryClasses(category)"
v-for="category of orderCategories"
:key="category" >
{{ category }}
</div>

script:
data () {
return {
selectedOrderCategory: 'All',
},
methods: {
getCategoryClasses ( category ) {
return this.selectedOrderCategory === category ? [ 'text-primary' ] : [ '' ]
}
}

Есть ли какой-то более удобный способ? Мне не нравится, при каждой смене активной категории функция вызывается N раз

#frontend #javascript #programming #russian #vue.js

0

05.02.2022

8 ответов

22 просмотра

Dmitry TTT Автор вопроса

Anton Permyakov
можешь вынести категории в отдельный компонент и т...

по сути будет тоже самое ведь, при каждом изменении активной категории будет происходить перерасчет компьютеда внутри каждой категории

0

05.02.2022

Anton Permyakov

Dmitry TTT
по сути будет тоже самое ведь, при каждом изменени...

а ты как представляешь себе обновление без перерасчёта? 🤔

0

05.02.2022

Igor Gordilov

К слову, для класса можно использовать более красивый объектный синтаксис Где ключ это класс, а значение его истинность, от которого он будет добавлять либо нет

0

05.02.2022

Dmitry TTT Автор вопроса

Igor Gordilov
К слову, для класса можно использовать более краси...

Это не удобная и громозкая штука

0

05.02.2022

Dmitry TTT Автор вопроса

Anton Permyakov
можешь вынести категории в отдельный компонент и т...

Самое хорошее решение это вот

0

05.02.2022