[Vuejs]-Multiple if condition in vuejs – how to get it work

by

0👍

Your code should work if the rest of your code and markup is correct. Since we can’t see the rest of your code, I will venture a guess that your “td” elements are not in a “table” element? If that is the case it won’t work. See this working example to observe the difference https://jsfiddle.net/skribe/sLaf7m0e/

<!-- Working Code -->
<table>
  <tr>
    <td v-if="!editing && selectedId === user.id">{{user.name}}</td>
    <td v-else>
      <input type="text" v-model="user.name" />
    </td>
  </tr>
</table>

<!-- Non Working Code -->
<div>
  <tr>
    <td v-if="!editing && selectedId === user.id">{{user.name}}</td>
    <td v-else>
       <input type="text" v-model="user.name" />
    </td>
  </tr>
</div>

Why this is the case is if you inspect the dom you will find that because proper markup for tables is not used the tr and td elements are ignored causing all the fields to be rendered in a single div element.

0👍

you are showing input on the else case….. you have to do it like this instead : 

    <td v-if="editing && selectedID === user.id">
        {{user.name}}
        <input type="text" v-model="user.name"/>
    </td>
    <td v-else>
        <!-- do something else if condition is false -->
   </td>

Leave a comment