Joao Scheuermann Joao Scheuermann - 5 months ago 21
Javascript Question

Diferent if on each item in a vue list

Im making a list with 'v-for' where each item has to have an if with a different value corresponding the array, but the Vue not allows to create a 'v-if' expression starting from {{ i.some_data_to_evaluate }} .

Have a way to solve this?

Here is my code:

HTML



<div id='test' v-for="i in items">
<p v-if={{i.value}}>{{i.some_text}}</p>
<p v-else>{{i.other_text}}</p>
</div>


JS



let test = new Vue({
el: '#test',
data: [
{some_text: 'jhon', other_text: 'jonas', value:false},
{some_text: 'joao', other_text: 'maria', value:true}
]
})


I'm just trying to change the version that is in the Vue guide.

Here's the link: http://vuejs.org/guide/list.html

Answer

You should replace the brackets with quotes on the v-if directive:

<div id="test" v-for="i in items"> 
  <p v-if="i.value">{{i.some_text}}</p>
  <p v-else>{{i.other_text}}</p>
</div>