Search code examples
vue.jslaravel-5.3vuejs2vue-componentvuex

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

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?

Solution

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