Skip to content

Patched elements keep inline styles from old vnodes #4227

Closed
@ghost

Description

Vue.js version

2.0.6+

Reproduction Link

https://jsfiddle.net/gw8g8cos/

vue-glitch

Steps to reproduce

$ vue init webpack-simple .
$ npm install vue@2.0.7 vue-template-compiler@2.0.7
<template>
<div>
    <section style="text-align: center" v-if="loading">
        Should be centered.
    </section>
    <section style="margin-top: 6rem;" v-if="!loading">
        Should not be centered.
    </section>
</div>
</template>

<script>
export default {
    name: 'app',
    data () {
        return {
            loading: true
        }
    },
    mounted: function() {
        setTimeout(() => {
            this.loading = false;
        }, 2000);
    }
}
</script>

What is Expected?

Patched elements should not keep inline styles from old vnodes.

What is actually happening?

During the update operation, patched elements will retain styles from vnodes that will no longer exist in the DOM.

Temporarily solution for end-users: changing inline styles to classes, choosing different tag names or adding a key directive will fix the issue. Thanks to @LinusBorg for the latter.

It looks like this PR has introduced this regression #4138. I've opened a pull request with a failing test that confirms this issue.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions