Объекты в vue.js
Помогите пожалуйста разобраться с vue. Есть объект, который получаю из API, нужно сравнить id из food с this.$route.params.id. Пытаюсь делать таким образом:
return this.allMenu.food.find(item => item.id == this.$route.params.id)
в computed, но выдает ошибку TypeError: Cannot read properties of undefined (reading 'find').
Ответы (1 шт):
Автор решения: smellyshovel
→ Ссылка
Проблема в том, что вызывается метод массива find не на массиве, а на объекте.
Поэтому код нужно изменить на такой.
return Object.values(this.allMenu.food).find(item => item.id == this.$route.params.id)
Кроме того, когда шаблон будет пытаться отрисоваться и вызовет соответствующий геттер, данные с API еще не факт, что придут. Поэтому необходимо добавить дополнительную проверку вида
return Object.values(this.allMenu.food)?.find(item => item.id == this.$route.params.id) ?? []
Либо, если новый синтаксис в вашей среде не поддерживается, так
return this.allMenu && this.allMenu.food ? Object.values(this.allMenu.food).find(item => item.id == this.$route.params.id) : []