Как вытащить различные компоненты в div с помощью v-for? - PullRequest
Новая
       10

Как вытащить различные компоненты в div с помощью v-for?

0 голосов
/ 12 января 2019

Я пытаюсь добавить различные компоненты в содержимое вкладок здесь https://codepen.io/iTaurus85/pen/KbrBEa

При переключении вкладок мне нужно получать содержимое из этих компонентов. Но я только что получил текст.

Как я могу решить эту проблему? Или, может быть, я выбрал неправильный способ показывать разные страницы через вкладки? 

<div id="app">
    <v-content>
    <v-layout row wrap class="tab-layout">
    <v-toolbar color="cyan" dark tabs>
      <v-toolbar-side-icon></v-toolbar-side-icon>

      <v-toolbar-title>Page title</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>search</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>more_vert</v-icon>
      </v-btn>

      <v-tabs
        slot="extension"
        v-model="tab"
        color="cyan"
        align-with-title
      >
        <v-tabs-slider color="yellow"></v-tabs-slider>

        <v-tab v-for="item in levels" :key="item">
          {{ item.name }}
        </v-tab>
      </v-tabs>
    </v-toolbar>

    <v-tabs-items v-model="tab">
      <v-tab-item v-for="item in levels" :key="item">
        <v-card flat>
          {{ item.content }}
        </v-card>
      </v-tab-item>
    </v-tabs-items>
    </v-layout>
  </v-content>
</div>

new Vue({
  el: '#app',
  // components:{
  //     intro,
  //      Elementary,
  //   },
  data () {
    return {
       tab: null,
        levels: [
          {name:'Beginner', content: '<intro></intro>'},
          {name:'Elementary', content: '<elementary></elementary>'},
          {name:'Pre-Intermediate', content: 'Pre-Intermediate'},
          {name:'Intermediate', content: 'Intermediate'},
          {name:'Upper-Intermediate', content: 'Upper-Intermediate'}
        ]
    }
  }
})

Ответы [ 3 ]

0 голосов
/ 12 января 2019

Вы можете использовать is ( Vue: is ) для компонентов v-for + для каждой вкладки: 

<div v-for="item in items"><component :is="item.componentName"></component></div>

Ваш товар может быть что-то вроде: 

{componentName: 'Intermidiate', tasks: 100}

И в экземпляре Vue вы также должны добавить такой компонент, как: 

new Vuew({
   components: {
       Inetrmidiate,
   }
})

И последний момент - просто создайте новый Vue-компонент с именем Intermidiate.

0 голосов
/ 14 января 2019

Ответ здесь https://vuejs.org/v2/guide/components.html#Dynamic-Components. Этот пример https://jsfiddle.net/chrisvfritz/o3nycadu/ показал именно то, что я хотел. 

<script src="https://unpkg.com/vue"></script>

<div id="dynamic-component-demo" class="demo">
  <button
    v-for="tab in tabs"
    v-bind:key="tab"
    v-bind:class="['tab-button', { active: currentTab === tab }]"
    v-on:click="currentTab = tab"
  >{{ tab }}</button>

  <component
    v-bind:is="currentTabComponent"
    class="tab"
  ></component>
</div>

Vue.component('tab-home', { 
    template: '<div>Home component</div>' 
})
Vue.component('tab-posts', { 
    template: '<div>Posts component</div>' 
})
Vue.component('tab-archive', { 
    template: '<div>Archive component</div>' 
})

new Vue({
  el: '#dynamic-component-demo',
  data: {
    currentTab: 'Home',
    tabs: ['Home', 'Posts', 'Archive']
  },
  computed: {
    currentTabComponent: function () {
      return 'tab-' + this.currentTab.toLowerCase()
    }
  }
})

.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #e0e0e0;
}
.tab {
  border: 1px solid #ccc;
  padding: 10px;
}
0 голосов
/ 12 января 2019

Вы можете использовать директиву v-html: https://vuejs.org/v2/guide/syntax.html#Raw-HTML - кодовое указание: https://codepen.io/anon/pen/EGOOym.

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

...