Skip to content

Hydration fails when write like "<div><span>123</span>{{value}}</div>" in the template and the data "value" is a empty string #11109

@deqwin

Description

@deqwin

Version

2.6.11

Reproduction link

https://codepen.io/deqwin/pen/wvaMxoO

Steps to reproduce

open the reproduction above and you will see a red vue warning in the console

What is expected?

a successful hydration

What is actually happening?

the hydration fails and the app re-renders absolutely


this looks like the problem caused by the empty text node (src/core/vdom/patch.js line:646)

Activity

enbo315

enbo315 commented on Mar 4, 2020

@enbo315

hello do well

luohong123

luohong123 commented on Apr 8, 2020

@luohong123

Hello,Modify it so that there is no error,beacuse,The client-side rendered virtual DOM tree is not matching server-rendered content. You have one more {{value}} .

<div id="app" data-server-rendered="true"><span>123</span></div>
<template id="tpl">
  <div id="app"><span>123</span></div>
</template>
deqwin

deqwin commented on Apr 13, 2020

@deqwin
Author

Hello,Modify it so that there is no error,beacuse,The client-side rendered virtual DOM tree is not matching server-rendered content. You have one more {{value}} .

<div id="app" data-server-rendered="true"><span>123</span></div>
<template id="tpl">
  <div id="app"><span>123</span></div>
</template>

Yes, it works. But it's not easy to modify because i have written this many times in my project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @posva@deqwin@luohong123@enbo315

      Issue actions

        Hydration fails when write like "<div><span>123</span>{{value}}</div>" in the template and the data "value" is a empty string · Issue #11109 · vuejs/vue