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

Question

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

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

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

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

但是我无法实现条件。

谢谢。

Answer 1

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

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

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

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

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

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

<div v-if="isExamAssigned">

Answer 2

尝试在您的 blade.php 文件中像这样传递道具

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

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

Answer 3

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

:isExamAssigned='@json($isExamAssigned)'

Answer 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

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

How to pass boolean values from Blade to Vue Component Laravel 7?

php

laravel

vue.js

laravel-7