I have a datatable using Vuetify that passes the localAuthority attribute from a Rails backend. Everything works fine until I pass an empty child association (nested attribute). In this case "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 },
        ],

So in the example above, it will work as long as all records have county associations (belongs_to). However, if a record does not have a "county" associated with it, you will receive the following error:

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

I tried many ways, such as adding conditional statements like this:

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

But nothing seems to work.