Vue v-для условного стиля
Я использую v-for для создания кнопок. Я добавляю класс .active, если isActiveButton() возвращает true:
<button
v-for = "(text, index) in this.buttonOptions"
class = "btn"
:class = "{active: isActiveButton(text)}"
:value='text'
@mousedown.prevent @click = "some_method">
{{text}}
</button>
Как лучше всего добавить класс .active к первой кнопке, если isActive() возвращает false для всеbuttonOptions? Обратите внимание, что buttonOptions является опорой.
редактировать блок кода
—
08.06.2018 20:51
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
2
1 563
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Используйте вычисляемый, который фильтрует this.buttonOptions, где isActiveButton имеет значение true и принимает индекс в качестве параметра
Ответ принят как подходящий
Вычисленное свойство - это то, что вам нужно!
var app = new Vue({
el: '#app',
data: {
buttonOptions: ['button1', 'button2', 'button3', 'button4']
},
methods: {
isActiveButton: function (text) {
return (text === text.toUpperCase());
},
some_method: function() {
console.info('Button clicked')
}
},
computed: {
shouldFirstBeActive: function () {
return (this.buttonOptions.filter(el => this.isActiveButton(el))).length === 0
}
}
});.active {
background: #f00;
}<script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id = "app">
<section>
<button
v-for = "(text, index) in buttonOptions"
class = "btn"
:class = "{active: isActiveButton(text) || (shouldFirstBeActive && index === 0)}"
:value='text'
@mousedown.prevent @click = "some_method">
{{text}}
</button>
</section>
</div>Я не знаю, что делают методы isActiveButton, поэтому мне пришлось импровизировать: он проверяет, является ли строка прописной.
В чем хитрость - это вычисленное свойство shouldFirstBeActive, которое возвращает true, если все элементы в массиве buttonOptions не справляются с методом isActiveButton:
return (this.buttonOptions.filter(el => this.isActiveButton(el))).length === 0
Если, например, вы измените button2 на BUTTON2, то isActiveButton вернет true для этого элемента, что преобразует вычисленное свойство shouldFirstBeActive в false.
var app = new Vue({
el: '#app',
data: {
buttonOptions: ['button1', 'BUTTON2', 'button3', 'button4']
},
methods: {
isActiveButton: function (text) {
return (text === text.toUpperCase());
},
some_method: function() {
console.info('Button clicked')
}
},
computed: {
shouldFirstBeActive: function () {
return (this.buttonOptions.filter(el => this.isActiveButton(el))).length === 0
}
}
});.active {
background: #f00;
}<script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id = "app">
<section>
<button
v-for = "(text, index) in buttonOptions"
class = "btn"
:class = "{active: isActiveButton(text) || (shouldFirstBeActive && index === 0)}"
:value='text'
@mousedown.prevent @click = "some_method">
{{text}}
</button>
</section>
</div>Другие вопросы по теме
Как обновить кеш в фоновом режиме?
Переопределение переменных Bulma в компонентах vue без увеличения размера полезной нагрузки - Nuxt
Генерация идентификаторов на основе родительской опоры на Vue JS
Отложить уничтожение в хуке жизненного цикла vue
Как восстановить данные из одного компонента в другой в vue JavaScript
Можно ли иметь один модальный компонент (не отображаемый по умолчанию) внутри каждого элемента списка в vuejs?
Vuejs не отображает компоненты внутри элементов таблицы HTML
Сохранить div как файл изображения в vuejs
Vuejs отображает изображения динамически
Слот Vue загружает асинхронный компонент до того, как сработает инструкция v-if слота
Похожие вопросы
Можно ли получить доступ к значению переменной в v-for извне цикла v-for?
Laravel Echo + Redis + Socket.io
Точка останова Visual Studio Code отображается не в том месте
Как перейти по ссылке с помощью Javascript?
VueJS не удалось смонтировать компонент
Магазин Vuex для возврата результатов объекта из firebase не работает
Самоуверенная структура проекта Vue-CLI v3
Рендеринг тега компонента Vue, добавленного внешним кодом
Отложить уничтожение в хуке жизненного цикла vue
Отрисовка пользовательских стилей в bootstrap-vue
Предполагается, что этот
,появится раньше, чем:value?