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

Question

我正在尝试在Vue组件中使用true/false或1/0实现IF条件。我查看了之前提出的一些问题，但是无法理解。请帮助我。

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

控制器（我尝试用两种方法，以便可以通过true/false或1/0获得成功，在这两种方法中，我都能够通过dd($isExamAssigned)在页面上获取到1/0或true/false）：

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

但是我无法实现条件。

谢谢。

- Daljit Singh

Answer 1

在您的 blade.php 文件中以以下方式传递 prop

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

这将以布尔格式发送该属性。

- Himanshu Sharma

---

如果有其他人遇到这个问题，请注意在@Himanshu Sharma的答案中v-bind的简写（即：attr-name中的冒号）。如果您省略了它，Vue将无法将“false”解释为表达式而不是字符串。也就是说，您会在vue props中得到“false”而不是false。感谢@Himanshu Sharma！这让我疯狂了。 - th3coop

Answer 2

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

:isExamAssigned ='@json($isExamAssigned)'

- MicB

Answer 3

你正在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">

- mrhn

---

先生，我已经在Blade、控制器和组件中更改了代码行，但还没有生效。 - Daljit Singh

dd($isExamAssigned) 给出了我想要的确切输出，即如果向用户分配了测验，则为 true，否则为 false，不知道问题出在哪里。请帮忙。 - Daljit Singh

你不能同时使用相同的名称来定义 props 和 data，因此你不必在 data 中设置它。因此，请移除你的 data 字段 isExamAssigned。 - mrhn

你的props命名不一致，应该使用kebab-case解析到组件中，但在组件内部使用camelcase。因此，当你将其传递给组件时，isExamAssigned应该是:is-exam-assigned="true"。 - mrhn

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

- Fadarrizz