开发者问题收集

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