Question

我不确定为什么我的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/

Answer 1

根据我上面的评论，您需要在父元素中开始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/

Answer 2

您的语句<p v-if="todo.type === '1'">Showing type: 1</p>在循环之外。因此todo在这里是未定义的。

您应该尝试这样的事情：

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

这里是JSFiddle。

无法获得v-if以根据属性类型正确显示列表项

2 个答案: