Почему при поиске вылезает TypeError: Cannot read property 'toString' of null?

Question

[Konstantin Malyarov]

Решил взять здесь код для поиска во VueJS 2.0
Однако при поиске выдает ошибку:

vue.min.js:6 TypeError: Cannot read property 'toString' of null
    at Object.values.some.m (home.js:281)
    at Array.some (<anonymous>)
    at sortedTokens_VMP.filter.n (home.js:281)
    at Array.filter (<anonymous>)
    at a.filteredTokens_VMP (home.js:281)
    at Kr.get (vue.min.js:6)
    at Kr.evaluate (vue.min.js:6)
    at a.filteredTokens_VMP (vue.min.js:6)
    at a.eval (eval at Tn (vue.min.js:6), <anonymous>:3:4728)
    at a.t._render (vue.min.js:6)

Как выглядит код:

computed: {
  sortedTokens_VMP() {
    const k = this.sortKey
    return this.tokens_VMP.sort((a, b) => (a[k] < b[k] ? -1 : a[k] > b[k] ? 1 : 0) * [1, -1][+this.reverse])
  },
  filteredTokens_VMP() {
    const s = this.search.toLowerCase()
    return this.sortedTokens_VMP.filter(n => Object.values(n).some(m => m.toString().toLowerCase().includes(s)))
  }
},
methods: {
  sortBy: function (sortKey) {
    this.reverse = (this.sortKey == sortKey) ? !this.reverse : false;
    this.sortKey = sortKey;
  },
},

Чисто поменял переменные.
Сам объект:

number_token:(...)
patient: {last_name: 'test', first_name: 'test'}
place_residence:(...)
profile:(...)
recourse:(...)
result_hospitalization:(...)
short_name_MO:(...)
social_group:(...)
stage:(...)
subject_RF:(...)
treatment_method:(...)
view_appeal:(...)
view_extract:(...)

Answer 1

[0xD34F]

Какое-то из свойств объекта оказалось null'ом. Почему бы не добавить проверку перед toString'ом - что именно вы собираетесь преобразовывать? Ну или преобразовывать в строку как-нибудь иначе, варианты разные есть: ('' + m) или `${m}` или String(m).

А вообще, вы конечно поторопились вот так в лоб использовать первый попавшийся код. Вон, у вас там ещё и вложенные объекты есть, по их свойствам поиск корректно работать не будет (т.к. дефолтное строковое представление объекта - это '[object Object]') - об этом вы подумали? Нет, точно надо проверять, что за значение:

return this.sortedTokens_VMP.filter(n => Object.values(n).some(m => {
  if (m instanceof Object) {
    // проверяем объект, возможно, стоит сделать какую-нибудь рекурсивную функцию под это дело
  } else if (typeof m === 'number') {
    // а вдруг числа надо обрабатывать иначе, чем строки
  } else {
    // какая-то дефолтная проверка значения
  }
}));

Comments

[Konstantin Malyarov]

А как преобразовать стрелочные функции в боле-менее читабельный код, а то я не разбираюсь.

[0xD34F]

Так разобрались бы. Да и не обязательно здесь делать обычную функцию - ведь стрелочные допускают более одного выражения, надо только скобки фигурные поставить, добавил в ответ пример.

[Konstantin Malyarov]

0xD34F, я читал, но в голове не уложилось.

[0xD34F]

Даже и не знаю, что сказать... Может, конкретный пример поможет? Представьте, что у вас есть стрелочная функция:

(a, b) => a + b (или (a, b) => { return a + b })

Аналогичная ей обычная функция будет выглядеть так:

function(a, b) {
  return a + b
}.bind(this)

То есть, стрелочные функции отличаются от обычных синтаксисом (нет ключевого слова function, а между списком параметров и телом функции та самая стрелка) и автоматической привязкой контекста.

Answer 2

[nurdus]

А computed не так должен выглядеть?

computed: {
  sortedTokens_VMP: function () {
    //...
  },
  filteredTokens_VMP: function () {
    //...
  }
},