Skip to content

SSR issue with dynamic <input> type #6907

Closed
@FranckFreiburger

Description

@FranckFreiburger

Version

2.5.2

Reproduction link

Unable to quickly setup a SSR environment to show the issue.

Steps to reproduce

<template>
	<input :type="'text'" v-model="foo">
</template>
<script>
export default {
	data() {
		return {
			foo: 123,
		}
	},
}
</script>

What is expected?

generated HTML by the server: <input type="text">

What is actually happening?

the server generates <!---->


hydration error in browser console:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Uncaught (in promise) TypeError: Cannot read property 'toLowerCase' of undefined
    at emptyNodeAt (vendor.js:18438)
    at VueComponent.patch [as __patch__] (vendor.js:19011)
    at VueComponent.Vue._update (vendor.js:15663)
    at VueComponent.updateComponent (vendor.js:15791)
    at Watcher.get (vendor.js:16134)
    at new Watcher (vendor.js:16123)
    at mountComponent (vendor.js:15795)
    at VueComponent.webpackJsonp.../node_modules/vue/dist/vue.runtime.esm.js.Vue$3.$mount (vendor.js:20834)
    at init (vendor.js:17087)
    at hydrate (vendor.js:18887)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions