Joao Scheuermann Joao Scheuermann - 1 year ago 86
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:


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


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:

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download