Vuetify - TypeError:无法读取未定义的属性(读取“trim”)
2022-02-07
7402
此问题发生在 Vuetify 的 v-data-table 中。
当从以下代码中删除“show-select”选项时,此错误不会再出现。
有时当我更改和更新其他组件时,此组件会正确显示。
我尝试重建、重新部署、删除 v-slot 范围等。 但此错误并未消失。
为什么会发生这种情况?请帮帮我...
<template>
<div>
<div>
<v-data-table
:headers="headers"
:items="items"
:items-per-page="per"
:page.sync="page"
item-key="no"
show-select
disable-sort
hide-default-footer
@input="selectedRow"
>
<template v-for="header in headers" #[`item.${header.value}`]="props">
<template v-if="header.type === 'test'">
{{ props.item[header.value] | toTestFormat }}
</template>
<template v-else>
{{ props.item[header.value] }}
</template>
</template>
</v-data-table>
</div>
<div>
<v-pagination
v-model="page"
:length="pageCount"
total-visible="5"
@input="clickPage"
>
</v-pagination>
</div>
</div>
</template>
<script lang="ts">
import { Component, Emit, Prop, Vue } from 'nuxt-property-decorator'
@Component
export default class PagingTable extends Vue {
@Prop({ type: Headers, required: true }) readonly headers!: Headers[]
@Prop({ type: Object, required: true }) readonly items!: Items[]
@Prop({ type: Number, default: 1 }) readonly current!: number
@Prop({ type: Number, default: 5 }) readonly per!: number
@Prop({ type: Number, default: 900 }) readonly width!: number
// data
page = 0
// mounted
mounted() {
if (this.current <= this.pageCount) {
this.page = this.current
} else {
this.page = this.pageCount
}
}
get pageCount(): number {
return this.items.length / this.per
}
@Emit('selectedRow')
selectedRow(selected: any) {
return selected
}
@Emit('clickPage')
clickPage(selectedPage: number): number {
return selectedPage
}
}
</script>
错误详情如下。
TypeError: Cannot read properties of undefined (reading 'trim')
at VueComponent.getIcon (vuetify.js?ce5b:17220:1)
at Proxy.render (vuetify.js?ce5b:17349:1)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569:1)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4070:1)
at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)
at new Watcher (vue.runtime.esm.js?2b0e:4484:1)
at mountComponent (vue.runtime.esm.js?2b0e:4088:1)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8459:1)
at init (vue.runtime.esm.js?2b0e:3137:1)
at createComponent (vue.runtime.esm.js?2b0e:6022:1)
TypeError: Cannot read properties of undefined (reading 'trim')
at VueComponent.getIcon (vuetify.js?ce5b:17220:1)
at Proxy.render (vuetify.js?ce5b:17349:1)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569:1)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4070:1)
at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)
at Watcher.run (vue.runtime.esm.js?2b0e:4570:1)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4326:1)
at Array.eval (vue.runtime.esm.js?2b0e:1989:1)
at flushCallbacks (vue.runtime.esm.js?2b0e:1915:1)
2个回答
只需向您的组件添加一个
name
属性:
@Component: ({
name: 'PagingTable'
})
Gaş Bîn
2022-03-12
我没有测试过,但我认为这种情况发生是因为当您有
show-select
时,表格会在标题中呈现一个复选框。由于您在所有标题中都创建了 v-for,因此这将包含复选框,并且行
{{ props.item[header.value] }>
可能会失败,因此不要使用
v-else
,而应使用
v-else-if="header.value != 'data-table-select'"
XAronX
2022-02-08