Question

我有一个带有来自循环的项目的ul，然后是额外的li。

<ul>
  <todo-item v-for="(todo,index) in todos" v-bind:todo="todo" :key="index" />
  <li :key='"new_item"'>
    <input placeholder="What needs to be done?" type="text" v-model="new_todo" >
    <button v-on:click="add_todo()">Add</button>
  </li>
</ul>

这并不显示额外的行。但是，如果我切换它，那么首先它会更多。

<ul>
  <li :key='"new_item"'>
    <input placeholder="What needs to be done?" type="text" v-model="new_todo" >
    <button v-on:click="add_todo()">Add</button>
  </li>
  <todo-item v-for="(todo,index) in todos" v-bind:todo="todo" :key="index" />
</ul>

所以我可能做错了关键，但我找不到确切的内容。

The whole code is here

Answer 1

问题是vue组件需要一个结束标记，并且只能使用自动关闭标记才能正常工作。

尝试这样：

<ul>
  <todo-item v-for="(todo,index) in todos" v-bind:todo="todo" :key="index"></todo-item>
  <li :key='"new_item"'>
    <input placeholder="What needs to be done?" type="text" v-model="new_todo" >
    <button v-on:click="add_todo()">Add</button>
  </li>
</ul>

来自官方Vue Style Guide：

自我关闭的组件，他们不仅没有   内容，但意味着没有内容。这是两者之间的区别   书中的空白页和标有“此页故意离开的页面”   空白。“你的代码也更清晰，没有不必要的结束标记。

不幸的是，HTML不允许自定义元素自动关闭 -   只有官方的“无效”元素。这就是策略的原因   当Vue的模板编译器之前可以访问模板时可能   DOM，然后提供符合DOM规范的HTML。

Answer 2

您不能使用自动关闭代码，因此不使用<todo-item /> <todo-item></todo-item>

https://github.com/vuejs/vue/issues/1036

似乎不是有效的HTML5组件。

Answer 3

您使用SFC还是常用的HTML文件？也许问题是HTML解析器不允许在<todo-item>内使用<ul>。尝试使用<li :is="'todo-item'" v-for...>代替（它可以在您的代码中使用）

<div id="app">
  <h1>TODOs</h1>
  <ul>
    <li :is="'todo-item'" v-for="(todo,index) in todos" v-bind:todo="todo" :key="index"></li>
    <li :key='"new_item"'>
      <input placeholder="What needs to be done?" type="text" v-model="new_todo" >
      <button v-on:click="add_todo()">Add</button>
    </li>
  </ul>  
  <p>You have finished {{ done }}/{{ total }}</p>
</div>

https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

Vue.js v-for with extra li不会渲染

3 个答案: