How can I use if in if on vue.js 2?

Question

If in view blade, it's like this :

<ul>
@if ($a)
    @if (!$b)
        <li>
            <p>...</p>
            ...
        </li>
    @endif
@endif
...
</ul>

I want change it to be vue component

I try like this :

<ul>
<li v-if="a" v-if="!b">
    <p>...</p>
    ...
</li>
...
</ul>

Seems it's wrong

How can I do it correctly?

Why do you have two v-ifs? v-if="a && !b" should be enough. — Amresh Venugopal
– Amresh Venugopal, Commented Apr 13, 2017 at 5:15

Frnak · Accepted Answer · 2017-04-13 05:28:24Z

1

You have multiple options either you chain the condition as described by @Amresh Venupogal or you make a nested if just like you did in your bladeview. However it would require you to add an additional html element.

Option A

<ul> 
  <li v-if="a && !b"><p>...</p></li>
</ul>

Option B (obviously worse since you will create empty div's inside your unorderd list)

<ul> 
  <div v-if="a">
     <li v-if="!b"><p>...</p></li>
  </div>
</ul>

answered Apr 13, 2017 at 5:28

Frnak

6,8626 gold badges38 silver badges74 bronze badges

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

Collectives™ on Stack Overflow

How can I use if in if on vue.js 2?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related