Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Transition table with VueJS

I tried to continue with the example on the vuejs website. I tried to add images and a transition state when I sort data. However it doesn't work. I have tried to add the following line to make it works but it doesn't:

<tbody name="table-row" is="transition-group">

Do you have some ideas for me?
https://codepen.io/wooza/pen/wezqXP

like image 374
Woza Avatar asked Jun 19 '17 14:06

Woza


1 Answers

https://codepen.io/anon/pen/gRmxwJ

https://v2.vuejs.org/v2/guide/transitions.html#List-Transitions

Unlike <transition>, it renders an actual element: a <span> by default. You can change the element that’s rendered with the tag attribute.

<transition-group tag="tbody" name="table-row">
      <tr v-for="entry in filteredData" :key="entry.name">
      //...
      </tr>
</transition-group>
like image 158
Eric Guan Avatar answered Nov 13 '22 15:11

Eric Guan