Vuetify Data-Table Header 数组不接受空 child 关联

Question

我有一个 data-table 使用 Vuetify 从 rails 后端传递 localAuthority 道具。在我传递一个空的 child 关联（嵌套属性）之前，这一切都非常有效。在这种情况下 'county':

<script>
  import axios from "axios";
  export default {
    name: 'LocalAuthorityIndex',
    props: {
      localAuthorities: {type: Array, default: () => []},
      counties: {type: Array, default: () => []},
      localAuthorityTypes: {type: Array, default: () => []}
    },
    data() {
      return{
        search: '',
        dialog: false,
        testmh: 'hello',
        dialogDelete: false,      
        headers: [
          { text: 'Name', align: 'start', value: 'name' },
          { text: 'ONS Code', value: 'ons_code' },
          { text: 'ID', value: 'id' },
          { text: 'Population', value: 'population' },
          { text: 'county', value: 'county.name' },
          { text: 'Website', value: 'website' },
          { text: 'Actions', value: 'actions', sortable: false },
        ],

因此在上面的示例中，只要所有记录都具有县关联 (belongs_to)，它就可以工作。但是，如果一条记录没有与之关联的 'county'，则会出现以下错误：

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'name')"

我尝试了很多方法，例如添加如下条件语句：

      { text: 'county', value: ('county.name' ? 'county.name' : nil )},

但似乎没有任何效果。

Answer 1

根据您在 Codepen 的 <v-data-table> 代码，我发现您正在用自己的 table 项覆盖默认项槽位。

您的错误来自这部分代码：

...
<template #item.county.name="{ item }">
  <a :href="'/counties/' + item.county_id">
    {{ item.county.name }}
  </a>
</template>
...

看看第一个字符串。 #item.county.name 是 v-slot:item.county.name 的缩写形式，来自 headers 数组中的一个字符串：

...
{ text: 'county', value: 'county.name' },

所以没有错误，这部分被 vuetify 库正确解析，即使你的 item 不包含任何 county.

错误在上面代码的第三个字符串中。您正在尝试打印 name of county 而不检查它是否存在。这就是您收到 ...Cannot read properties of undefined... 错误的原因。

我猜你可以这样解决你的问题：

<template #item.county.name="{ item }">
  <a :href="'/counties/' + item.county_id">
    {{ item.county ? item.county.name : 'No name' }}
  </a>
</template>

当然，如果您需要在这种情况下将link隐藏到县，您也可以将v-if（或v-show）添加到a标签中。

我还使用一些静态数据创建了 a small Codepen。看看这个 playground 中的 item.name.text 插槽，也许它会帮助您理解相似的对象关联。

Vuetify Data-Table Header 数组不接受空 child 关联

Vuetify Data-Table Header array not accepting empty child associations

javascript

arrays

ruby-on-rails

vue.js

vuetify.js