CODEWITHSUNDEEP
javascriptvue.js
Joao Scheuermann
Joao Scheuermann

Reputation: 103

Different if on each item in a vue list

I'm 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

Upvotes: 0

Views: 504

Answers (1)

pespantelis
pespantelis

Reputation: 15372

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>

Upvotes: 1

Related Questions