Vuetify Data-массив заголовков таблиц, не принимающий пустые дочерние ассоциации

ProgramBox

Vuetify Data-массив заголовков таблиц, не принимающий пустые дочерние ассоциации

Post author:admin
Запись опубликована:13 июля, 2022
Post category:Вопросы по программированию

#javascript #arrays #ruby-on-rails #vue.js #vuetify.js

#javascript #массивы #ruby-on-rails #vue.js #vuetify.js

Вопрос:

У меня есть таблица данных, использующая Vuetify, которая передает localAuthority prop из серверной части rails. Все это работает очень хорошо, пока я не передам пустую дочернюю ассоциацию (вложенный атрибут). В этом случае ‘округ’:

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

Но, похоже, ничего не работает.

1. Не могли бы вы включить свой <v-data-table> компонент в свой код и предоставить свою версию vuetify? В этом случае в последней версии vuetify 2.6.1 я не испытал никаких предупреждений / ошибок — аналогичные несвязанные столбцы просто остаются пустыми. Также было бы неплохо, если бы вы могли воспроизвести проблему в Codepen.

2. Вот ссылка на файл vue. Я новичок в просмотре и кодировании, поэтому понимаю, что все это немного запутанно. codepen.io/TomasMillar/pen/OJxyOev?editors=1010 . Rails передает модель local_authorities, которая иногда принадлежит округу, а иногда и нет. vue version «^2.6.14»,

3. Спасибо, ваши комментарии заставили меня поискать в другом месте кода, и я понял, что проблема на самом деле в первых нескольких строках, где я пытаюсь показать это название округа как ссылку на округ. Все еще нужно выяснить, как это решить. Похоже, что ответ не имеет ничего общего с заголовком моего сообщения, поэтому мне интересно, должен ли я удалить эту тему. Не уверен, что такое хороший этикет?

4. Эти строки, казалось, сделали свое дело: <div v-if=»item.county»> {{ item.county.name }} </div>

5. Я думаю, что это не лучшее решение для размещения v-if здесь… Я опубликую ответ и попытаюсь объяснить, как работают заголовки и слоты v-data-table

Ответ №1:

Согласно вашему <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' },

Таким образом, ошибки нет, эта часть правильно анализируется библиотекой vuetify, даже если ваш элемент не будет содержать ни одного округа.

Ошибка находится в 3-й строке приведенного выше кода. Вы пытаетесь напечатать название округа, не проверяя его существование. Вот почему вы получаете ...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 с некоторыми статическими данными. Загляните в слот item.name.text на этой игровой площадке, возможно, это поможет вам понять похожие ассоциации объектов.