例如，如果我将用户数据作为这些参数
first_name -> john
last_name -> null
当我想填充输入(或span，p，..(时，我想将空数据显示为空字符串，但它显示为"；空"；字符串
<h3 class="dahsboard__sidebar__header__name">{{userData.first_name +' '+ userData.last_name}}</h3>
它显示为：
"jhon null"
我在axios中找到了一种防止这种情况的方法：
this.userData = res.data;
for(let user in this.userData){
if(this.userData[user]=='null' || this.userData[user]==null){
this.userData[user] = '';
}
}
在上面的代码中，this.userData是我使用axios获取的所有用户数据但我正在寻找一种更好的(专业的(方法来做
我的Api请求是这样的：
$user = Auth::user();
return response()->json([
'first_name' => $user->name,
'last_name' => $user->last_name,
'email' => $user->email,
'avatar'=>$path //don't mind the avatar
],200);
这是因为当您尝试在JavaScript中根据null值连接字符串时，JavaScript将使用松散转换将null转换为"null"。
为了避免这个问题，你有很多选择，但我认为最简单的是只使用两个单独的打印。
<h3 class="dahsboard__sidebar__header__name">
{{ userData.first_name }} {{ userData.last_name }}
</h3>
通过这种方式，您可以避免串联问题，因为如果其中每一个都为null，则它们将不打印任何内容
我实际上还没有测试过，但它应该可以工作，除非Vue编译器破坏了它！
<h3 class="dahsboard__sidebar__header__name">
{{ (userData.first_name ?? '') + ' ' + (userData.last_name ?? '') }}
</h3>
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
在您的API中，您应该能够拥有以下内容：
$user->last_name ? $user->last_name : ''
用户迁移应该允许空值，使您按照以下进行迁移
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->text('first_name')->nullable();
$table->text('last_name')->nullable();
$table->text('email')->unique();
$table->text('avatar')->nullable();
$table->rememberToken();
$table->timestamps();
});
获取数据的雄辩查询
$user = Auth::user();
return response()->json([
'first_name' => $user->name,
'last_name' => $user->last_name,
'email' => $user->email,
'avatar'=>$path //don't mind the avatar
],200);
在您的上，Axios使用foreach。零值不会显示
res.data.forEach((element) => {
console.log({
first_name: element.first_name,
last_name: element.last_name,
email: element.email,
});
});
output : jhon