Блог

Главная - Вопросы по программированию - Не получает разные имена классов во время итерации

Не получает разные имена классов во время итерации

#vue.js #v-for

#vue.js #v-для

Вопрос:

У меня цикл v-for в моем приложении vuejs. я хочу, чтобы у каждого диапазона было другое имя класса. Например .spa0, .spa1, .spa3….. Как мне это сделать, используя индекс в цикле v-for?

Я пробовал что-то вроде этого:

  :class="`spa${index}`"

Часть моего кода:

 <div>
<span v-for="(t, index) in table_data" :class="`spa${index}`">{{t}}</span>
</div>

Я ожидаю, что у каждого диапазона будет свой класс.

Комментарии:

1. Не могли бы вы поделиться структурой данных table_data ?

2. table_data: { тип: ‘LDAP’, des: ‘LDAP для демонстрации — не редактируйте и не удаляйте это приложение’, api: ‘показать токен’, scim: ‘ cloud.kapstonellc.com: 8082/scim / v2 / 10VN44ZN ‘, endis: true, act: true },

Ответ №1:

Если table_data это так, как вы указали в комментариях:

 {
  type: 'LDAP',
  des: 'LDAP for Demo - Do not edit or delete this App',
  api: 'show token',
  scim: 'cloud.kapstonellc.com:8082/scim/v2/10VN44ZN',
  endis: true,
  act: true
}

Вероятно, вместо этого вам следует выполнить итерацию по table_data ключам:

 <div>
  <span v-for="(key, index) in Object.keys(table_data)" :class="`spa${index}`">
    {{ table_data[key] }}
  </span>
</div>