Why is the v-bind:class error?

Question

Vue.js

Hey!
There is this hash:

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
        }
      ],

methods:

infoData() {
      return this.fadeSettings;
    }

I output via v-for:

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

... and I get an error:
- invalid expression: Unexpected token . in
[ { infoItem.fadeClass: !infoItem.isVisible }, infoItem.defaultClass ]
Raw expression: v-bind:class="[ { infoItem.fadeClass: !infoItem.isVisible }, infoItem.defaultClass ]
" dot in infoItem.fadeClass? But how do I then fulfill the necessary condition - infoItem.fadeClass: !infoItem.isVisible ?
I will be grateful for the answer!

Answer 1

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

infoItem.fadeClass - there are no such property names (that is, it happens, but you can’t set them like that, quotes are needed)
probably meant[infoItem.fadeClass]

Answer 2

Try like this

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