transition-group is not working on tables

[bedenko]

transition-group appears to be ignored, when applied to table:

https://jsfiddle.net/jaco2h22/1/

Furthermore, if you keep pressing Shuffle button, rows are getting cut out.

[chrisvfritz]

You can fix it by updating to:

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

That way, the browser won't get grumpy when it sees an unusual element inside of a table.

[yyx990803]

Ahh, yes, it's because you are using the in-dom template so the browser parses it first.

You can either fix it with @chrisvfritz 's solution, or use pure string templates, which is not subject to browser parsing restrictions.

[bedenko]

Thank you guys!

[bedenko]

Actually, in jsfiddle everything works, but when i transfer it to my code, i get warning:
children must be keyed: , when they actually all are .

Could it be the problem in the fact, that i am working with templates?

My code is:

<template>
  <tbody name="table-row" is="transition-group">
    <tr v-for="entry in loc" v-show="!collapsed" @click="toggleCollapsed" :key="entry.location">
        <td v-for="key in configHeader" v-if="entry" :key="key">
            {{entry[key]|toPrice(key)}}
        </td>
    </tr>
    </transition-group>
</template>

<script>
export default {
  data() {
    return {
        configHeader:["first", "second", "third", "fourth", "fifth"],
        collapsed:true
    }
  },
  props: ['loc', 'name', 'index'],
  methods:{
    total: function(col){
        if (!this.loc){
            return
        }
        if (col=="stationName"){
            return this.name
        }
        var sum=this.loc.map(el => el[col]).reduce((acc,cur)=> acc+cur,0)
        if (col=="payback"){
            return sum/this.loc.length 
        }
        return sum
    },
    toggleCollapsed:function(){
        this.collapsed=!this.collapsed
    }
  },
}
</script>

I appreciate the help!

P.S.: in debugger, i see in TransitionGroup, rawChildren array gets created with 5 vnodes.
But only first four are tr, the fifth one is undefined

[chrisvfritz]

The reason you didn't see this warning in the fiddle is because you were using the minified (production) build, where warnings are stripped out. Each key must be unique for object constancy in animations.

[martinfrangul]

You can fix it by updating to:

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

That way, the browser won't get grumpy when it sees an unusual element inside of a table.

Works perfect for mee! Thanks!!

[linzebingo]

林某人已收到您的邮件了:)