8

I'm trying to implement IF condition with true/false or 1/0 in Vue Component. I go through some earlier asked questions but not able to get it. Please help me out.

IF condition not gives true output even if dd gives true.

Controller (I tried with two ways so that either I may got success with true/false or 1/0, In both methods on page I'm able to get 1/0 or true/false with dd($isExamAssigned)):

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

blade.php:

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

code part from Component.vue:

props:['isExamAssigned'],

data(){

    return{

            isExamAssigned :this.isExamAssigned,

        }

and here is the IF condition:

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

                        <!-- Code here for IF -->

                    </div>


                    <div v-else>

                        <!-- Code here for ELSE -->

                    </div>

I tried different ways to get the values, like:

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

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

<div v-if="isExamAssigned">

but Im not able to implement condition.

Thanks.

Daljit Singh
  • 270
  • 3
  • 10

4 Answers4

16

Try passing the prop like this in your blade.php file

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

This will send the prop in Boolean format.

Himanshu Sharma
  • 406
  • 3
  • 8
  • 2
    In case someone else hits this, pay attention to the short hand for `v-bind` (the colon in `:attr-name`) in @Himanshu Sharma's answer. If you leave that out Vue won't know to interpret `"false"` as an expression instead of a string. ie. you get `"false"` instead of `false` in your vue props. Thanks @Himanshu Sharma! This was driving me crazy. – th3coop Nov 24 '21 at 05:06
9

Himanshu's answer is correct, it can also be written like:

:isExamAssigned='@json($isExamAssigned)'

MicB
  • 151
  • 1
  • 3
5

You are setting it to string value of '1' in the vue component. Later you are strict comparing it to an integer, boolean and boolean again. The most correct approach would be to set it to a real boolean like so. The second approach you had would work.

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

Now PHP type juggles weird, if you print out $isExamAssigned it will print out 1. You can try with {{true}} and see the result yourself. To avoid this, do the following check in your blade file when setting the component.

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

This will make the following if statements work.

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

<div v-if="isExamAssigned">
mrhn
  • 17,961
  • 4
  • 27
  • 46
  • Sir now I changed the lines in blade, controller and component, but its not working yet. – Daljit Singh Jul 27 '20 at 09:10
  • dd($isExamAssigned) gives the exact output that I want, i.e. if quiz assigned to user then it give true otherwise false, don't know where the problem is. Please help. – Daljit Singh Jul 27 '20 at 09:21
  • You cant have props and data together with the same name, you don't have to set it in data. So remove your data field isExamAssigned – mrhn Jul 27 '20 at 10:09
  • 1
    And you have inconsistencies with naming of your props, it should be kebab-case parsed to the component, but in your component be camelcase. So isExamAssigned should be :is-exam-assigned="true" when you give it to the component – mrhn Jul 27 '20 at 10:14
1

Mrhn's answers is true.

You can make Laravel do the casting for you by setting the cast on the model.

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

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

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

Fadarrizz
  • 38
  • 3