[Vue warn]: ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство« имя категории »из неопределенного» - PullRequest
0 голосов
/ 14 января 2020
<div v-if="text" class="click-event" @click="select(record)">
  {{
     ((groupData.filter(group => (group.id === parseInt(text, 0))))[0].categoryName)||'No Group'
  }}
</div>

у меня есть эта строка кода, которая отображает categoryName в ant design vue таблица.

, но она возвращает эту ошибку в консоли:

Vue warn]: Error in render: "TypeError: Cannot read property 'categoryName' of undefined"

, но она все еще отобразить правильные данные, которые я хочу в таблице. да, я знаю, что могу заставить al oop в javascript функцию, как только перехватить API, чтобы изменить данные но Get API, содержащий много переменных в нем уже. если я хочу сделать al oop, это будет стоить много строк кода.

как я могу преодолеть эту ошибку? но все еще отображать категориюName?

1 Ответ

2 голосов
/ 14 января 2020
((groupData.filter(group => (group.id === parseInt(text, 0))))[0].categoryName)||'No Group'

Основываясь на вашем выражении, я могу выделить несколько проблем:

  1. Второй аргумент в parseInt - это radix, он должен быть между 2 и 36, в вашем коде это 0, что неверно. Я предполагаю, что это должно быть 10, потому что я думаю, id хранится в десятичной системе счисления.
  2. Если какой-либо элемент в вашем groupData не совпадает, вы получите пустой массив, в таком случае первый элемент в массиве будет undefined, и вот почему вы получаете такую ​​проблему.
  3. Вместо фильтра я бы порекомендовал вам использовать поиск, он имеет тот же синтаксис, но он возвращает первый сопоставленный результат или неопределенный, если нет совпадения.

Примерно так:

groupData.filter(group => group.id === parseInt(text, 10))
Не пишите такие логику c внутри части шаблона, это не всегда очевидно и трудно отладить.

Надеюсь, это поможет вам.

...