我有一個使用 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 )},
但似乎沒有任何效果。
uj5u.com熱心網友回復：
根據您<v-data-table>在 Codepen的代碼，我看到您正在用自己的代碼覆寫默認的表項插槽。
您的錯誤來自這部分代碼：
...
<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' },
所以沒有錯誤，即使您的專案不包含任何County，這部分也會被 vuetify 庫正確決議。
錯誤在上述代碼的第三個字串中。您試圖在不檢查縣名的情況下列印縣名。這就是為什么你會...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>
當然，如果您在這種情況下需要隱藏與縣的鏈接，您也可以在標簽中添加v-if（或v-show）a。
我還創建了一個帶有一些靜態資料的小型 Codepen。看看這個 Playground 中的 item.name.text 槽，也許它會幫助你理解類似的物件關聯。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/372761.html
標籤：javascript 数组 红宝石轨道 Vue.js Vuetify.js
下一篇：將焦點設定在Vue中的輸入欄位上