Question

TypeError：无法读取 vue.js 组件 Laravel 9 中的 null 属性（读取“profile_picture”）

2022-11-07

869

javascript node.js vue.js vuejs3

环境 Laravel v9 + vite，PHP 8.1，vue3，VPS Linux 发行版。UBUNTU

我的 Laravel 项目的 vue.js 组件中出现此错误，它表示 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 库没有任何关系，但控制台仍指向此库对这个错误有什么看法？？额外帮助材料>>

Answer 1

条件 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"

Answer 2

似乎在某些 rep 对象中， user 属性为空。您能否验证数组中的所有对象是否都包含 user 属性的值。

您可以使用 可选链接 (?.) 运算符：

v-if="rep?.user?.profile_picture !== null"