Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
AliRezaBeitari opened this issue Mar 23, 2022 · 0 comments

Comments

@AliRezaBeitari
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant