Вообщем может меня уже поплавило или я совсем глупый пишу форму для регистрации, первое что встречает пользователя это выпадающий список "Role" есть 2 типа регистрации, и после того как пользователей выбирает свою роль для него открываются поля для ввода, выглядит это примерно так
Собственно сама форма
<v-dialog class="reg" btn-text="Регистрация">
<v-app style="max-height: 90%" id="inspire">
<div>
<v-select
v-model="select"
:items="items"
item-text="role"
label="Role"
return-object
@change="chekRole();"
></v-select>
<div v-show="visibleCorp">
<v-text-field label="Название компании"></v-text-field>
<!-- :rules="rules" -->
<v-text-field
label="Количество работников"
hide-details="auto"
></v-text-field>
</div>
<div v-show="visibleGen">
<v-text-field label="Имя"></v-text-field>
<!-- :rules="rules" -->
<v-text-field label="Фамилия" hide-details="auto"></v-text-field>
</div>
</div>
</v-app>
</v-dialog>
Шаблон где оно появляется
<template id="dialog-template">
<div>
<div class="Dialog" v-show="active">
<div class="Dialog__overlay"></div>
<div class="Dialog__content">
<div class="Dialog__body">
<slot></slot>
</div>
<div class="Dialog__footer">
<button class="btn" @click="onCancel()">Отмена</button>
<button class="btn btn-ok" @click="onConfirm()">{{ btnText }}</button>
</div>
</div>
</div>
</div></template
>
Скрипт
<script>
Vue.component("v-dialog", {
template: "#dialog-template",
data: function () {
return {
active: false,
};
},
props: ["btnText"],
methods: {
open: function () {
this.active = true;
},
close: function () {
this.active = false;
},
onCancel: function () {
this.close();
},
onConfirm: function () {
this.close();
},
},
});
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
select: { role: "General" },
items: [{ role: "General" }, { role: "Corporate" }],
visibleGen: true,
visibleCorp: false,
};
rules: [
(value) => !!value || "Required.",
(value) => (value && value.length >= 6) || "Min 6 characters",
];
},
});
</script>
Посмотреть мой позор можно тут :
https://baysnoize.github.io/TokenD/