[Vuejs]-Cannot get v-if to correctly show list items based on property type

by

0👍

As per my comment above you need to start your v-for loop in a parent element. Something like this.

<div id="demo" v-cloak>
 <h1>{{title | uppercase}}</h1>
 <span v-for="todo in todos">
   <p v-if="todo.type === '1'">Showing type: 1</p>
   <p v-if="todo.type === '2'">Showing type: 2</p>
     <ul>
       <li  v-if="todo.type === '1'" :class="{ done: todo.done }"    @click="todo.done = !todo.done">
    {{ todo.value }}
      </li>
     <li  v-if="todo.type === '2'" :class="{ done: todo.done }" @click="todo.done = !todo.done">
    {{ todo.value }}
     </li>
    </ul>
 </span>
</div>

http://jsfiddle.net/skribe/yMv7y/7982/

-1👍

Your statement <p v-if="todo.type === '1'">Showing type: 1</p> is outside the loop. So the todo is undefined here.

You should try something like this :

<div id="demo" v-cloak>
  <h1>{{title | uppercase}}</h1>
  <p>Showing type: 1</p>
  <div v-for="todo in todos" v-if="todo.type === '1'">
    <ul>
      <li :class="{ done: todo.done }" @click="todo.done = !todo.done">
        {{ todo.value }}
      </li>
    </ul>
  </div>
</div>

Here is the JSFiddle.

Leave a comment