@aweui

Почему ошибка при v-bind:class?

Привет!
Есть такой хэш:
fadeSettings: [
				{
					title: 'Test tltle',
					defaultClass: 'b-nav__text',
					fadeClass: 'b-nav__text_fade',
					isVisible: true,
					time: 200
				},
				{
					title: 'Test description',
					defaultClass: 'b-nav__cash-term',
					fadeClass: 'b-nav__cash-term_fade',
					isVisible: true,
					time: 300
				}
			],


методы:
infoData() {
			return this.fadeSettings;
		}


Вывожу через v-for:
<span
				v-for=" infoItem  in infoData()"
				:key="infoItem.text"
				v-bind:class="[ { infoItem.fadeClass: !infoItem.isVisible }, infoItem.defaultClass ]"
			>
				{{ infoItem.title}}
			</span>


... и получаю ошибку:
- invalid expression: Unexpected token . in

[ { infoItem.fadeClass: !infoItem.isVisible }, infoItem.defaultClass ]

Raw expression: v-bind:class="[ { infoItem.fadeClass: !infoItem.isVisible }, infoItem.defaultClass ]"


Я так понял, ругается на точку в infoItem.fadeClass? Но как мне тогда выполнить необходимо условие - infoItem.fadeClass: !infoItem.isVisible ?

Буду благодарен за ответ!
  • Вопрос задан
  • 139 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
:class="[ { infoItem.fadeClass: !infoItem.isVisible }, infoItem.defaultClass ]"

infoItem.fadeClass - таких имён свойств не бывает (то есть бывает, но так их задать нельзя, нужны кавычки)

наверное, имелось в виду [infoItem.fadeClass]
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Planet_93
@Planet_93
Попробуйте так

<span
        v-for=" infoItem  in infoData()"
        :key="infoItem.text"
        v-bind:class="[ infoItem.isVisible ? infoItem.fadeClass: '' , infoItem.defaultClass ]"
      >
        {{ infoItem.title}}
      </span>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы