如何将布尔值从 Blade 传递到 Vue 组件 Laravel 7？答案

【问题标题】：How to pass boolean values from Blade to Vue Component Laravel 7?如何将布尔值从 Blade 传递到 Vue 组件 Laravel 7？
【发布时间】：2020-11-16 09:58:15
【问题描述】：

我正在尝试在 Vue 组件中使用 true/false 或 1/0 来实现 IF 条件。我经历了一些较早提出的问题，但无法得到它。请帮帮我。

IF 条件不会给出true 输出，即使dd 给出true。

控制器（我尝试了两种方法，以便我可以通过真/假或 1/0 获得成功，在页面上的两种方法中，我都可以通过 dd($isExamAssigned) 获得 1/0 或真/假):

    dd($isExamAssigned); // here I'm able to get 1 or 0

blade.php：

    <quiz-component
   
   :isExamAssigned = "{{$isExamAssigned}}"
   >
</quiz-component>

来自 Component.vue 的代码部分：

props:['isExamAssigned'],

data(){

    return{

            isExamAssigned :this.isExamAssigned,

        }

这里是 IF 条件：

<div v-if="isExamAssigned === '1'">

                        <!-- Code here for IF -->

                    </div>


                    <div v-else>

                        <!-- Code here for ELSE -->

                    </div>

我尝试了不同的方法来获取值，例如：

<div v-if="isExamAssigned === 1">

<div v-if="isExamAssigned === true">

<div v-if="isExamAssigned">

但我无法执行条件。

谢谢。

【问题讨论】：

标签： php laravel vue.js laravel-7

【解决方案1】：

尝试在你的 Blade.php 文件中传递这样的道具

:isExamAssigned="{{ json_encode($isExamAssigned) }}"

这将以布尔格式发送道具。

【讨论】：

如果其他人遇到这个问题，请注意@Himanshu Sharma 的答案中v-bind 的简写（:attr-name 中的冒号）。如果你忽略它，Vue 将不知道将 "false" 解释为表达式而不是字符串。 IE。您在 vue 道具中得到 "false" 而不是 false。谢谢@Himanshu Sharma！这让我发疯了。

【解决方案2】：

Himanshu的回答是正确的，也可以这样写：

:isExamAssigned='@json($isExamAssigned)'

【讨论】：

【解决方案3】：

您在 vue 组件中将其设置为字符串值 '1'。稍后，您再次将其与整数、布尔值和布尔值进行严格比较。最正确的方法是将其设置为像这样的真正布尔值。你的第二种方法会奏效。

$isExamAssigned = DB::table('quiz_user')->where('user_id', $authUser)->where('quiz_id', $quizId)->exists();

现在 PHP 类型很奇怪，如果你打印出 $isExamAssigned，它会打印出 1。你可以尝试使用 {{true}} 并自己查看结果。为避免这种情况，请在设置组件时在您的刀片文件中进行以下检查。

:isExamAssigned = "{{$isExamAssigned ? 'true' : 'false'}}"

这将使以下 if 语句起作用。

<div v-if="isExamAssigned === true">

<div v-if="isExamAssigned">

【讨论】：

先生，现在我更改了刀片、控制器和组件中的线路，但它还没有工作。
dd($isExamAssigned) 给出了我想要的确切输出，即如果测验分配给用户，那么它给出 true 否则 false，不知道问题出在哪里。请帮忙。
props 和 data 不能同名，不必在 data 中设置。所以删除你的数据字段 isExamAssigned
而且你的道具命名不一致，它应该是kebab-case解析到组件，但在你的组件中是驼峰式。所以 isExamAssigned 应该是 :is-exam-assigned="true" 当你把它交给组件时

【解决方案4】：

Mrhn 的回答是对的。

你可以通过在模型上设置演员来让 Laravel 为你做演员。

// On a model, e.g. App\Models\Exam.php

$casts = ['is_exam_assigned' => 'boolean'];

https://laravel.com/docs/master/eloquent-mutators#attribute-casting

【讨论】：