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

2👍

((groupData.filter(group => (group.id === parseInt(text, 0))))[0].categoryName)||'No Group'

Based on your expression I can highlight few problems:

  1. Second argument in parseInt is radix and it has to be between 2 and 36, in your code it’s 0 which is incorrect. I assume it has to be 10 because I think id stored in decimal numeral system.
  2. If any item in your groupData does not match you will get empty array in such case first item in array is undefined, and that’s why you get such issue.
  3. Instead of filter I would recommend you to use find, it has same syntax but it returns first matched result or undefined if there is no match.

Something like this:

groupData.find(group => group.id === parseInt(text, 10))
  1. Don’t write such logic inside template part, it’s not always obvious and hard to debug.

I hope it helps to you.

Leave a comment