Как чтобы из tabs выходили динамично тот текст, который мне нужен?

У меня возникает один момент, как мне сделать чтобы во вкладки 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
  • Вопрос задан
  • 184 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Уберите атрибуты href у v-tab'ов.

А ещё не вижу, чтобы у вас использовался v-app. Где v-app? Почему его нет?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы