• Как правильно настроить v-tabs во vuetify.js?

    delphinpro
    @delphinpro
    frontend developer
    Там же пример есть?!

    <v-tabs v-model="active">
      <v-tab v-for="n in 3" :key="n">Item {{ n }}</v-tab>
      <v-tab-item v-for="n in 3" :key="n">
          Любое содержимое 
      </v-tab-item>
    </v-tabs>


    Карточки выводятся в цикле. Для связи используется key, это может быть уникальный идентификатор вкладки или индекс массива.

    В примере, само собой все упрощено, в реальном приложении вы замените цикл на реальные данные. Опять же упрощенно это может выглядеть так:

    data: function(){
      return {
        tabList: [
          {caption: 'Вкладка 1', content: '<h1>Содержимое первой вкладки</h1>'},
          {caption: 'Вкладка 2', content: '<h1>Содержимое второй вкладки</h1>'},
          {caption: 'Вкладка 3', content: '<h1>Содержимое третьей вкладки</h1>'},
        ]
      }
    }


    <v-tab v-for="(tab, index) in tabList" :key="index">Item {{ tab.caption }}</v-tab>
    <v-tab-item v-for="(tab, index) in tabList" :key="index">
      <div v-html="tab.content"></div>
    </v-tab-item>


    конечно, вы не будете в массиве данных содержать разметку, там будут чистые данные, которые могут рендерится в шаблоне прямо на месте, или передаваться в компонент внутри вкладки.

    UPD
    Если ваши вкладки не могут быть заданны массивом, потому что у них кардинально разное содержание, вы можете выводить вкладки без цикла

    <v-tab :key="1">Tab 1</v-tab>
    <v-tab :key="2">Tab 2</v-tab>
    
    <v-tab-item :key="1">Содержимое вкладки 1</v-tab-item>
    <v-tab-item :key="2">Содержимое вкладки 2</v-tab-item>
    Ответ написан
    Комментировать
  • Как правильно задать массив во Vuex store и передать в него значения, а также вычитывать с него?

    shmatuan
    @shmatuan
    8 year of Web, 5 years of Vue
    Тут собран сразу пример работы crud, но лучше ещё почитать официальные доки (на русском)
    https://codeburst.io/build-a-simple-todo-app-with-...
    Ответ написан
    Комментировать