Vuetify 資料表標頭數組不接受空子關聯

Question

我有一個使用 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 )},

但似乎沒有任何效果。

Answer 1

根據 Codepen 上的 <v-data-table> 程式碼，我發現您正在用自己的程式碼覆蓋預設的表項插槽。

您的錯誤來自這部分程式碼：

...

...

看一下第一個字串。 #item.county.name 是v-slot:item.county.name 的縮寫形式，來自headers 陣列中的字串之一：

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

所以沒有錯誤，即使您的item不包含任何county，這部分也會被vuetify函式庫正確解析。

錯誤出現在上述程式碼的第三個字串中。您正在嘗試列印county的名稱而不檢查其是否存在。這就是為什麼您收到 ...無法讀取未定義的屬性... 錯誤。

我想你可以這樣解決你的問題：

當然，如果您需要在這種情況下隱藏縣鏈接，您也可以將v-if（或v-show）添加到a標籤中。

我還使用一些靜態資料創建了一個小型Codepen。看看這個 Playground 中的 item.name.text 槽，也許它會幫助你理解類似的物件關聯。