У меня возникает один момент, как мне сделать чтобы во вкладки tabs выводился тот текст, который мне нужно, потому что что я сделал, текст перестал вообще выводить, тут у меня не понятно. В дальнейшем конечно будет это форма авторизации и регистрации. Использую библиотеку Vuetify
Вот пример моей песочницы
https://codesandbox.io/s/0qo18zy82v<template>
<div class="authorization">
<div>
<v-tabs
v-model="active"
color="teal"
centered
dark
icons-and-text
>
<v-tabs-slider color="yellow"></v-tabs-slider>
<v-tab href="#login">
Авторизация
<v-icon>lock_open</v-icon>
</v-tab>
<v-tab href="#registration">
Регистрация
<v-icon>how_to_reg</v-icon>
</v-tab>
<v-tab-item
v-for = "{item, index} in items"
:id = "index"
:key = "index"
>
<v-card flat>
<v-card-text>{{ item }}</v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
</div>
</div>
</template>
<script>
export default {
name: "AppComponent",
data () {
return {
items: [{registration: 'registration form', login: 'login form'}],
}
}
}
</script>
<style scoped>
</style>
Нашел пример с angular. Примерно предполагал что это в html разметке надо делать, но примерно пока что осознание нет
https://codepen.io/akshatamohanty/pen/JXPQXw