TypeError: невозможно прочитать свойства null (чтение «profile_picture») в компоненте vue.js Laravel 9
Среда Laravel v9 + vite, PHP 8.1, vue3, дистрибутив Linux VPS. УБУНТУ
У меня есть эта ошибка в компоненте vue.js моего проекта Laravel, он говорит, что profile_picture имеет нулевое значение в объекте, но я также проверяю это
<div v-if = "typeof rep.user.profile_picture != null">
<img :src = "rep.user.profile_picture" :alt = "rep.user.name" class = "commenter-image rounded-circle"/>
</div>
<div v-else>
<img src = "/assets/images/user-placeholder-1.jpg" alt = "Commenter-placeholder" class = "commenter-image rounded-circle"/>
</div>
Я тщательно искал это свойство profile_picture в файле, его нет нигде, кроме этого. но все еще есть эта проблема Кроме того, он не имеет никакого отношения к библиотеке sweetalert2, но все же консоль указывает на эту библиотеку. Есть мысли по поводу этой ошибки?? дополнительный вспомогательный материал>>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Условие v-if = "typeof rep.user.profile_picture != null" не работает, потому что typeof rep.user.profile_picture возвращает object. Поэтому я предлагаю вам изменить это условие на
v-if = "rep.user.profile_picture !== null"
или даже
v-if = "rep.user && rep.user.profile_picture !== null"
Похоже, что в некоторых rep объектах свойство user равно null. Не могли бы вы убедиться, что все объекты в массиве содержат значение в свойстве user.
Вы можете использовать необязательный оператор цепочки (?.):
v-if = "rep?.user?.profile_picture !== null"
да, все объекты имеют пользовательский объект и свойство profile_picture, которое равно нулю, и есть только 2 основных объекта, поэтому я это понимаю,
@ZeeshanAwan В этом случае он не должен выдавать ошибку, о которой вы упомянули в посте. Мы правильно добавляем пользователя позже на основе каких-либо манипуляций/расчетов?
да, я уверен, что в каждом объекте комментария есть вложенный объект пользователя, потому что он кодируется вручную из внутреннего контроллера, я попробовал ваше решение, но проблема все еще есть. иногда он не отображается в среде разработки, но в рабочей среде он остается неподвижным, я не могу понять, где ошибка, которая вызывает эту ошибку, я проверяю все объекты, но проблема все еще существует, я собираюсь чтобы обновить вопрос с кодом компонента vue js, вы можете посмотреть
Я исправил код, добавив "?" во всех местах, где я пытался получить доступ к объекту пользователя, даже в атрибуте alt img, это странно, но не должно быть необходимости добавлять этот оператор внутри тега img, который находится внутри условия v-if, потому что тег img был рендеринг только в том случае, если условие становится истинным, иначе в теге img условия не должно быть переменных, пытающихся получить доступ к объекту пользователя, но все же, чтобы исправить это, я должен поместить этот оператор внутри тега img оператора v-if.
Я проверяю typeOf rep.user.profile_picture, для которого свойство с нулевым значением в объекте typeOf будет возвращать «объект», если я проверял rep.user, который является объектом, как вы можете видеть на последнем снимке экрана, прикрепленном к вопросу.