Not getting different class names while iterating

Question

I am having a v-for loop in my vuejs application. i want each span to have a different class name. For example .spa0, .spa1, .spa3..... How do I do it using index in v-for loop?

I tried something like this:

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

Some of my code is:

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

I expect each span to have a different class.

Answer 1

If table_data is like this as you stated in the comments:

{
  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
}

You should probably iterate over table_data keys instead:

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