В проекте VueNative, который использует NativeBase в качестве библиотеки компонентов (таким образом, теги с префиксом nb-), я имею следующий код. Он находится в тегах <template> и является частью файла нижнего колонтитула. vue, который содержит кнопки навигации. Этот лог c работает нормально, чтобы изменить цвет вкладки (кнопки), когда пользователь нажимает ее, и она становится активной.
<nb-button :active="tab2" :onPress="toggleTab2" :style="{ backgroundColor: (activeTab == 'tab2') ? 'rgb(117, 110, 116)' : 'rgb(82, 74, 81)' }">
<nb-text class="text">Instructions</nb-text>
</nb-button>
Я хотел бы заменить :style на :class поэтому все теги nb-button в файле относятся к именам классов, а не к жестко заданным цветам фона в каждом теге. Вот что я пробовал -
в тегах <template>:
<nb-button :active="tab2" :onPress="toggleTab2" :class="{ (activeTab == 'tab2') ? "active" : "inactive" }">
<nb-text class="text">Instructions</nb-text>
</nb-button>
в тегах <style>:
.inactive {
background-color: rgb(82, 74, 81);
}
.active {
background-color: rgb(117, 110, 116);
}
Однако в редакторе кода красная волнистая линия отображается под :class строкой, которая говорит, что «директивам v-bind требуется значение атрибута». Как это можно изменить, чтобы работать?
Редактировать На основе этой публикации Я также попробовал следующее:
<nb-button :active="tab2" :onPress="toggleTab2" :style="(activeTab == 'tab2') ? 'active' : 'inactive'">
Но это действует как будто игнорирует имена классов. Когда пользователь выбирает tab2, отображается активный цвет по умолчанию, а не цвет, указанный в стиле active.