我正在尝试将不同的组件添加到此处的标签内容中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'}
]
}
}
})
答案 0 :(得分:0)
您可以使用v-html
指令:https://vuejs.org/v2/guide/syntax.html#Raw-HTML-代码笔:https://codepen.io/anon/pen/EGOOym。
但是更好的方法是为每个标签创建单独的组件。
答案 1 :(得分:0)
您可以为每个标签的is
+组件使用v-for
(Vue :is):
<div v-for="item in items"><component :is="item.componentName"></component></div>
您的商品可能是这样的:
{componentName: 'Intermidiate', tasks: 100}
在Vue实例中,您还应该添加以下组件:
new Vuew({
components: {
Inetrmidiate,
}
})
最后一点-只需创建名为Intermidiate
的新Vue组件即可。
答案 2 :(得分:0)
答案在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;
}