vuetify-module
vuetify-module copied to clipboard
null model for v-tabs-items causes different output in SSR and client
Module version
^1.12.3
Describe the bug
According to Vuetify's documentation for <v-tabs-items>
, they used null
as the initial value for v-model
of this component. But if we use null
for it, the generated SSR code is all comments <!---->
, but on the client side is correct. This mismatch in nodes, causes the well known DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
. Although if you use 0
as the initial value of v-model
, it does not occur.
NOTE: This behavior only happens when you run npm run build && npm start
and dose not happen when running the development version using npm run dev
.
To Reproduce https://codesandbox.io/s/v-tabs-items-bug-with-null-v-model-olnx21?file=/pages/index.vue
<template>
<div>
<v-tabs-items v-model="tab">
<v-tab-item>1</v-tab-item>
<v-tab-item>2</v-tab-item>
<v-tab-item>3</v-tab-item>
</v-tabs-items>
</div>
</template>
<script>
export default {
data() {
return {
tab: null,
}
},
}
</script>
Steps to reproduce the behavior:
- Add a
<v-tabs-items>
component with few<v-tab-item>
children and assign it'sv-model
to a data variable. - Set that data variable to
null
- Run
npm run build && npm start
- See error:
DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
Expected behavior Have the same behavior in both server and client.
Screenshots