why is conditional rendering not working for form input in vuejs

Question

I have a form with select options :

        <div>
            <select>
                <option v-model="department" :value="n" v-for="n in ['Please select', 'Medicine', 'Dental']">{{n}}</option>
            </select>
        </div>
        <div class="alignBtn">
            <label><span>&nbsp;</span><input type="submit" v-on:click.prevent="generateSlip()" value="Submit" />
            </label>
        </div>

and based on the selection in the above I want to display header content:

               <div v-if="{department} === 'Medicine'">
                    <h1>Option A</h1>
                </div>
                <div v-else>
                    <h1>Option B</h1>
                </div>

but every time Option B is getting outputted .

Is there any special reason for using '{}' around 'department' in v-if — theHarsh
– theHarsh, Commented Dec 23, 2018 at 7:53
you mean just department should render the value of department ? — Ciasto piekarz
– Ciasto piekarz, Commented Dec 23, 2018 at 8:03

Husam Elbashir · Accepted Answer · 2018-12-23 08:03:20Z

0

I think that the v-model directive should be in the select element. You probably meant to do this ..

<div>
    <select v-model="department">
        <option :value="n" v-for="n in ['Please select', 'Medicine', 'Dental']">{{n}}</option>
    </select>
</div>
<div class="alignBtn">
    <label><span>&nbsp;</span><input type="submit" v-on:click.prevent="generateSlip()" value="Submit" />
    </label>
</div>

You also don't need destructuring in this case. So you can use department in your equality comparison directly ..

<div v-if="department === 'Medicine'">
    <h1>Option A</h1>
</div>
<div v-else>
    <h1>Option B</h1>
</div>

answered Dec 23, 2018 at 8:03

Husam Elbashir

7,1953 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ciasto piekarz Over a year ago

I see, make sense thanks, can you also help me with this: stackoverflow.com/q/53902123/3311276 please

theHarsh Over a year ago

Also you don't need strict comparison here.

Collectives™ on Stack Overflow

why is conditional rendering not working for form input in vuejs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related