时间戳

首页 > 解决方案 > 如何使用 v-for 将不同的组件拉入 div？

javascript - 如何使用 v-for 将不同的组件拉入 div？

问题描述

我正在尝试将不同的组件放入选项卡内容中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'}
        ]
    }
  }
})

标签： javascriptvue.jsvue-componentvuetify.js

解决方案

您可以为每个选项卡的 + 组件使用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,
   }
})

最后一点 - 只需创建名为Intermidiate.

推荐阅读