nuxt-community / vuetify-module

Vuetify Module for Nuxt 2
Other
630 stars 106 forks source link

null model for v-tabs-items causes different output in SSR and client #495

Open AliRezaBeitari opened 2 years ago

AliRezaBeitari commented 2 years ago

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:

  1. Add a <v-tabs-items> component with few <v-tab-item> children and assign it's v-model to a data variable.
  2. Set that data variable to null
  3. Run npm run build && npm start
  4. 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 Screen Shot 2022-03-23 at 8 03 33 PM