时间戳

首页 > 解决方案 > 无法让 v-if 根据属性类型正确显示列表项

list - 无法让 v-if 根据属性类型正确显示列表项

问题描述

我不确定为什么我的 v-if 不起作用。我正在尝试显示一个列表，如果该属性是类型 1。有谁知道我做错了什么？

代码：

HTML

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

JavaScript

var demo = new Vue({
  el: '#demo',
  data: {
    title: 'todos',
    todos: [{
      type: '1',
      value: 'Code'
    }, {
      type: '2',
      value: 'Debug'
    }] //testing with data use: [{done:false,content:'testing'}]
  }
})

jsfiddle：http: //jsfiddle.net/syed263/yMv7y/7972/

标签： listvue.jsrender

解决方案

根据我上面的评论，您需要在父元素中启动 v-for 循环。像这样的东西。

<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/

推荐阅读