multiple if condition in vuejs - how to get it work - vue.js

Question

I literally just started messing aroung with vuejs. I'm having problem with multiple if conditions.
This is how I'm trying to get it work:
<td v-if="!editing && selectedID === user.id">{{user.name}}</td>
<td v-else>
<input type="text" v-model="user.name" />
</td>
User clicks on edit button and sets editing prop to true, then if next condition is true it should display input, but it doesnt work. Don't know why.

Answer 1

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.

Answer 2

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>