Vue table transition

Question

I'm trying to add transition delay on my table. I'm using vuexy (vuesax) table and I want to add some nice animation on loading. I already have defined transitionDelay like this:

style () {
      return {
        left:this.cords.left,
        top:this.cords.top,
        transitionDelay: this.active ? this.delay : '0s',
        background:_color.getColor(this.color, 1),
        width: this.widthx
      }

and it works fine on some another component like:

        <transition-group class="todo-list" name="list-enter-up" tag="ul" appear>
            <li
              class="cursor-pointer todo_todo-item"
              v-for="(task, index) in taskList"
              :key="String(currFilter) + String(task.id)"
              :style="[{transitionDelay: (index * 0.1) + 's'}]">

              <todo-task :taskId="task.id" @showDisplayPrompt="showDisplayPrompt($event)" :key="String(task.title) + String(task.desc)" />
               
            </li>
        </transition-group>
    </component>

and here it works great, but in table not so much. Here is the code from table:

<template>
<div class="vx-col w-full">
<vx-card>
<div slot="no-body" class="mt-4">
  <vs-table  :data="products" class="table-dark-inverted">
    <template slot="thead">
      <vs-th sort-key="country">Country</vs-th>
      <vs-th sort-key="sales">Sales</vs-th>
      <vs-th sort-key="products">Products</vs-th>
      <vs-th sort-key="accessories">Accessories</vs-th>
      <vs-th sort-key="basket">Basket</vs-th>
      <vs-th sort-key="deliveries">Deliveries</vs-th>
      <vs-th sort-key="amount">Amount</vs-th>
    </template>

    <template slot-scope="{data}">
      <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" :style="[{transitionDelay: (data * 0.1) + 's'}]">

        <vs-td :data="data[indextr].country">
        <img height="15" :src="data[indextr].image" :alt="data[indextr].country">
          {{ data[indextr].country }}
        </vs-td>

        <vs-td :data="data[indextr].sales">
          {{ data[indextr].sales }}
        </vs-td>

        <vs-td :data="data[indextr].products">
          {{ data[indextr].products }}
        </vs-td>

        <vs-td :data="data[indextr].accessories">
          {{ data[indextr].accessories }}
        </vs-td>
        
        <vs-td :data="data[indextr].basket">
          {{ data[indextr].basket }}
        </vs-td>

        <vs-td :data="data[indextr].deliveries">
          {{ data[indextr].deliveries }}
        </vs-td>

        <vs-td :data="data[indextr].amount">
          {{ data[indextr].amount }}
        </vs-td>

      </vs-tr>
    </template>
    </vs-table>
</div>
    </vx-card>
    </div>
</template>

As you see I have added :style="[{transitionDelay: (data * 0.1) + 's'}] but not even error

Answer 1

I believe it should be:

:style="[{transitionDelay: (indextr * 0.1) + 's'}]