Tatasusunan pengepala jadual data Vuetify tidak menerima subasosiasi kosong

Question

Saya mempunyai jadual data menggunakan Vuetify yang melepasi sifat localAuthority daripada bahagian belakang Rails. Semuanya berfungsi dengan baik sehingga saya lulus persatuan anak kosong (atribut bersarang). Dalam kes ini "kaunti":

<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 },
        ],

Jadi dalam contoh di atas, ia akan berfungsi selagi semua rekod mempunyai gabungan daerah (kepunyaan_kepunyaan). Walau bagaimanapun, jika rekod tidak mempunyai "kaunti" yang dikaitkan dengannya, anda akan menerima ralat berikut:

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

Saya mencuba pelbagai cara, seperti menambah pernyataan bersyarat seperti ini:

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

Tetapi nampaknya tiada apa yang berkesan.

Answer 1

Berdasarkan kod <v-data-table> pada Codepen, saya nampak anda sedang menimpa slot kemasukan jadual lalai dengan kod anda sendiri.

Ralat anda datang daripada bahagian kod ini:

...

...

Lihat rentetan pertama. #item.county.name 是 v-slot:item.county.name 的缩写形式，来自 headers Salah satu rentetan dalam tatasusunan:

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

Jadi tiada ralat, walaupun item anda tidak mengandungi sebarang daerah, bahagian ini akan dihuraikan dengan betul oleh perpustakaan vuetify.

Ralat berlaku dalam rentetan ketiga kod di atas. Anda cuba mencetak nama daerah tanpa menyemak sama ada ia wujud. Itulah sebabnya anda mendapat ralat ...无法读取未定义的属性....

Saya rasa anda boleh selesaikan masalah anda seperti ini:

Sudah tentu, jika anda perlu menyembunyikan pautan daerah dalam kes ini, anda juga boleh meletakkan v-if （或 v-show）添加到 a dalam tag.

Saya juga mencipta Codepen kecil menggunakan beberapa data statik. Lihat slot item.name.text di taman permainan ini, mungkin ia akan membantu anda memahami perkaitan objek yang serupa.