I have a problem with the tab system in my project. When I want to have tabs in a dialog from vuetify and I want to have inputs and things that should be there and how it’s supposed to work correctly that on each tab there should be what should be there (in the context of my code there should be inputs for inserting blocks on each tab and inserting images on the other) it just doesn’t work and all the content stays on the front page of the dialog and the tabs are completely useless. Would anyone know what I’m doing wrong. Alternatively, thanks for the advice and answers.

Here is the code for dialog with tabs:

<template>
  <div>
    <v-btn icon="mdi-flag" id="runButton"></v-btn>
    <v-btn icon="mdi-octagon" id="resetButton"></v-btn>
    <v-btn icon="mdi-alpha-a-box" class="action-btn" @click="showModal = true"></v-btn>
    <br><br>
    <div class="blockly-container">
      <div ref="blocklyDiv" class="blockly-div"></div>
      <canvas id="canvas"></canvas>
    </div>
    <br>
    <xml ref="toolbox" style="display: none"></xml>

    <v-dialog v-model="showModal" max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">Blockly vytváření - akce</span>
        </v-card-title>
        <v-tabs v-model="tab">
          <v-tab value="one">Upload Blocks</v-tab>
          <v-tab value="two">Upload Images</v-tab>
        </v-tabs>
        <v-tabs-items v-model="tab">
          <v-tab-item value="one">
            <v-card-text>
              <v-file-input type="file" @change="uploadBlocks" label="Nahrát bloky" />
            </v-card-text>
          </v-tab-item>
          <v-tab-item value="two">
            <v-card-text>
              <v-file-input type="file" @change="uploadSprites" label="Nahrát obrázky" />
            </v-card-text>
          </v-tab-item>
        </v-tabs-items>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" @click="showModal = false">Close</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, nextTick } from 'vue';
import * as Blockly from 'blockly';

export default defineComponent({
  name: 'BlocklyModuleNewCreate',
  setup() {
    const blocklyDiv = ref(null);
    const toolbox = ref(null);
    const showModal = ref(false);
    const tab = ref('one');  // Default value should match one of the tab values
    let workspace: Blockly.WorkspaceSvg | null = null;

    onMounted(() => {
      nextTick(() => {
        if (blocklyDiv.value && toolbox.value) {
          workspace = Blockly.inject(blocklyDiv.value, {
            toolbox: toolbox.value,
            scrollbars: true,
          });
        }
      });
    });

    const uploadBlocks = (event: Event) => {
      const file = (event.target as HTMLInputElement).files?.[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          if (e.target) {
            const xmlText = e.target.result as string;
            const xml = Blockly.Xml.textToDom(xmlText);
            if (workspace) {
              const blockTypes = new Set();
              const blocks = xml.getElementsByTagName('block');
              for (let i = 0; i < blocks.length; i++) {
                blockTypes.add(blocks[i].getAttribute('type'));
              }

              const toolboxXml = document.createElement('xml');
              blockTypes.forEach((type) => {
                const block = document.createElement('block');
                block.setAttribute('type', type as string);
                toolboxXml.appendChild(block);
              });

              workspace.updateToolbox(toolboxXml);
            }
          }
        };
        reader.readAsText(file);
      }
    };

    const uploadSprites = (event: Event) => {
      const file = (event.target as HTMLInputElement).files?.[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          if (e.target) {
            const img = new Image();
            img.src = e.target.result as string;
            img.onload = () => {
              const ctx = (document.getElementById('canvas') as HTMLCanvasElement).getContext('2d');
              if (ctx) {
                ctx.drawImage(img, 0, 0);
              }
            };
          }
        };
        reader.readAsDataURL(file);
      }
    };

    const downloadApplication = () => {
      if (!workspace) return;

      const workspaceXml = Blockly.Xml.workspaceToDom(workspace);
      const workspaceXmlText = Blockly.Xml.domToPrettyText(workspaceXml);

      const toolboxElement = toolbox.value as unknown as Node;
      const toolboxXmlText = new XMLSerializer().serializeToString(toolboxElement);

      const applicationXml = `
      <application>
          <workspace>${workspaceXmlText}</workspace>
          <toolbox>${toolboxXmlText}</toolbox>
      </application>
      `;

      const blob = new Blob([applicationXml], { type: 'text/xml' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'blockly_application.xml';
      a.click();
      URL.revokeObjectURL(url);
    };

    return {
      blocklyDiv,
      toolbox,
      showModal,
      tab,
      uploadBlocks,
      downloadApplication,
      uploadSprites,
    };
  },
});
</script>

<style scoped>
body,
html {
  margin: 1;
  padding: 1;
}

.blockly-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.blockly-div {
  height: 480px;
  flex-grow: 1;
  border: 1px solid #ccc;
  min-width: 200px;
  max-width: 600px;
}

#canvas {
  height: 480px;
  width: 600px;
  border: 1px solid black;
}

#points {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  margin: 0;
  padding: 0;
}

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid black;
  z-index: 1000;
}

.modal p {
  margin: 0;
  padding: 0;
}

.modal button {
  margin-top: 10px;
}

#resetButton,
#runButton,
.action-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  outline: none;
}

#runButton {
  background-color: #4CAF50;
  color: white;
  box-shadow: 0 4px #2C7730;
}

#runButton:hover {
  background-color: #45a049;
}

#runButton:active {
  box-shadow: 0 2px #2C7730;
  transform: translateY(2px);
}

#resetButton {
  background-color: #f44336;
  color: white;
  box-shadow: 0 4px #93261A;
}

#resetButton:hover {
  background-color: #e63929;
}

#resetButton:active {
  box-shadow: 0 2px #93261A;
  transform: translateY(2px);
}

.action-btn {
  background-color: #ffa500;
  color: white;
  float: right;
  margin-right: 10px;
}

.action-btn:hover {
  background-color: #ff8c00;
}

.action-btn:active {
  box-shadow: 0 2px #ffa500;
  transform: translateY(2px);
}

@media (max-width: 1200px) {
  .blockly-div {
      height: 400px;
  }
  #canvas {
      height: 400px;
  }
}

@media (max-width: 992px) {
  .blockly-div {
      height: 300px;
  }
  #canvas {
      height: 300px;
  }
}

@media (max-width: 768px) {
  .blockly-div {
      height: 250px;
  }
  #canvas {
      height: 250px;
  }
}

@media (max-width: 576px) {
  .blockly-div {
      height: 200px;
  }
  #canvas {
      height: 200px;
  }
}
</style>

Maybe there is a problem somewhere with the key or value for the tabs and cards but when I tried everything it still doesn’t work.