Vue.js “列表组内部”对话框使标题位置不正确
列表组组件不正确地呈现数据- 应位于插槽激活器磁贴上的标题将与下拉元素一起呈现 我在这里使用了vuetify.js API的一个示例: . 即使使用原始示例,我也得到了相同的结果 外部组件:Vue.js “列表组内部”对话框使标题位置不正确,vue.js,vue-component,vuetify.js,Vue.js,Vue Component,Vuetify.js,列表组组件不正确地呈现数据- 应位于插槽激活器磁贴上的标题将与下拉元素一起呈现 我在这里使用了vuetify.js API的一个示例: . 即使使用原始示例,我也得到了相同的结果 外部组件: <template> <v-container> <v-dialog :v-model="dialog" persistent width="800"> <v-card> <v-card
<template>
<v-container>
<v-dialog :v-model="dialog" persistent width="800">
<v-card>
<v-card-title class="headline grey lighten-4" primary-title>File Results
<v-spacer/>
<v-btn flat icon @click="close">
<v-icon color="black" medium>cancel</v-icon>
</v-btn>
</v-card-title>
<ResultListView/>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" flat @click="openFileDialog">results</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-container>
</template>
列出vuetify exapmle之外的组件:
<template>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-toolbar color="teal" dark>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Topics</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>more_vert</v-icon>
</v-btn>
</v-toolbar>
<v-list>
<v-list-group
v-for="item in items"
:key="item.title"
v-model="item.active"
:prepend-icon="item.action"
aria-expanded="true"
no-action
>
<template v-slot:activator>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
<v-list-tile
v-for="subItem in item.items"
:key="subItem.title"
>
<v-list-tile-content>
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon>{{ subItem.action }}</v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list-group>
</v-list>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
export default {
data () {
return {
items: [
{
action: 'local_activity',
title: 'Attractions',
items: [
{ title: 'List Item' }
]
},
{
action: 'restaurant',
title: 'Dining',
active: true,
items: [
{ title: 'Breakfast & brunch' },
{ title: 'New American' },
{ title: 'Sushi' }
]
},
{
action: 'school',
title: 'Education',
items: [
{ title: 'List Item' }
]
},
{
action: 'directions_run',
title: 'Family',
items: [
{ title: 'List Item' }
]
},
{
action: 'healing',
title: 'Health',
items: [
{ title: 'List Item' }
]
},
{
action: 'content_cut',
title: 'Office',
items: [
{ title: 'List Item' }
]
},
{
action: 'local_offer',
title: 'Promotions',
items: [
{ title: 'List Item' }
]
}
]
}
}
}
</script>
我希望结果与提供的API示例类似
但我得到了以下结果:
由于您使用的是1.4.1版,因此还应该查看vuetify的正确版本文档, 如果您想做任何更改,只需浏览v1的文档,或者只需更新vuetify版本。 下面是解决方案的代码
<template>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-toolbar color="teal" dark>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Topics</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>more_vert</v-icon>
</v-btn>
</v-toolbar>
<v-list>
<v-list-group
v-for="item in items"
v-model="item.active"
:key="item.title"
:prepend-icon="item.action"
no-action
>
<v-list-tile slot="activator">
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile v-for="subItem in item.items" :key="subItem.title">
<v-list-tile-content>
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon>{{ subItem.action }}</v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list-group>
</v-list>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
export default {
data () {
return {
items: [
{
action: 'local_activity',
title: 'Attractions',
items: [
{ title: 'List Item' }
]
},
{
action: 'restaurant',
title: 'Dining',
active: true,
items: [
{ title: 'Breakfast & brunch' },
{ title: 'New American' },
{ title: 'Sushi' }
]
},
{
action: 'school',
title: 'Education',
items: [
{ title: 'List Item' }
]
},
{
action: 'directions_run',
title: 'Family',
items: [
{ title: 'List Item' }
]
},
{
action: 'healing',
title: 'Health',
items: [
{ title: 'List Item' }
]
},
{
action: 'content_cut',
title: 'Office',
items: [
{ title: 'List Item' }
]
},
{
action: 'local_offer',
title: 'Promotions',
items: [
{ title: 'List Item' }
]
}
]
}
}
}
</script>
希望有帮助 你在应用程序中使用的vuetify版本是什么?版本是:1.4.1Ok,我想如果是旧版本,可能是原因,但我不这么认为。我无法复制您遇到的问题,因此我只能认为您有其他原因导致冲突,但我不知道。试着自己测试列表组件,而不是在对话框中,然后添加内容,直到它崩溃。@Michaelgabay Cool,