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

Question

[aweui]

Привет!
Есть такой хэш:

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 ?

Буду благодарен за ответ!

Answer 1

[0xD34F]

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

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

наверное, имелось в виду [infoItem.fadeClass]

Comments

[aweui]

Действительно. Не знал, что так нужно, спасибо!

Answer 2

[Planet_93]

Попробуйте так

<span
        v-for=" infoItem  in infoData()"
        :key="infoItem.text"
        v-bind:class="[ infoItem.isVisible ? infoItem.fadeClass: '' , infoItem.defaultClass ]"
      >
        {{ infoItem.title}}
      </span>