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

Posted 2023-02-15

【中文标题】Vuetify Data-Table Header 数组不接受空子关联

【英文标题】：Vuetify Data-Table Header array not accepting empty child associations

【发布时间】：2022-01-10 06:05:51

【问题描述】：

我有一个使用 Vuetify 的数据表，它从 rails 后端传递 localAuthority 属性。在我传递一个空的子关联（嵌套属性）之前，这一切都很好。在本例中为“县”：

<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)，它就可以工作。但是，如果一条记录没有与之关联的“县”，则会出现以下错误：

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

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

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

但似乎没有任何效果。

【问题讨论】：

您能否将您的<v-data-table> 组件包含到您的代码中并提供您的 vuetify 版本？在这种情况下，我在最新的 vuetify 2.6.1 中没有遇到任何警告/错误 - 类似的未关联列只是保持空白。如果你能在 Codepen 重现这个问题，那就太好了。

这里是vue文件的codepen。我是查看和编码的新手，所以我意识到这有点混乱。 codepen.io/TomasMillar/pen/OJxyOev?editors=1010。 Rails 正在传递一个 local_authorities 模型，该模型有时属于某个县，有时不属于某个县。 vue 版本 "^2.6.14",

感谢您的 cmets 让我在代码的其他地方查看，我发现问题实际上出在我试图将县名显示为县的链接的前几行。仍然需要弄清楚如何解决这个问题。感觉答案与我的帖子标题无关，所以我想知道我是否应该删除这个帖子。不知道什么是好的礼仪？

这些行似乎可以解决问题： item.county.name

我想将 v-if 放在这里并不是一个更好的解决方案......我会发布一个答案并尝试解释 v-data-table 标题和插槽的工作原理

【参考方案1】：

根据您在 Codepen 的 <v-data-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' ,

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

错误出现在上述代码的第三个字符串中。您正在尝试打印 county 的 name 而不检查其存在。这就是您收到 ...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>

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

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

【讨论】：

非常感谢...解决了问题并提供了非常有用的答案。