在laravel-vue项目中从显示为“空”字符串的数据库中获取空数据。

Question

例如，如果我以以下参数获取用户数据

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);

Answer 1

这是因为当您尝试连接JavaScript中的字符串时，针对null值，JavaScript将使用松散转换将null转换为"null"。

为了避免这个问题，您有很多选择，但我认为最简单的方法是只使用两个单独的打印。

<h3 class="dahsboard__sidebar__header__name">
    {{ userData.first_name }} {{ userData.last_name }}
</h3>

这样，您就可以避免级联问题，因为如果其中的每一个都为null，则不会打印任何内容。

我还没有真正测试过它，但是它应该能工作，除非Vue编译器破坏它！

Answer 2

<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

Answer 3

在您的API中，您应该能够拥有如下内容：

$user->last_name ? $user->last_name : ''