[英]Vue.js v-for with extra li doesn't render
I have a ul with items coming from the loop, and then extra li after that.我有一个 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>
This doesn't show the extra line.这不显示额外的行。 But if I switch it so extra li is first it does.
但是如果我切换它,那么额外的 li 首先它会这样做。
<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>
So I'm probably doing something wrong with key, but I can't find what exactly.所以我可能在 key 上做错了什么,但我找不到究竟是什么。
The problem is that vue components require a closing tag and won't work properly just with self-closing tags.问题是 vue 组件需要一个结束标签,并且仅使用自结束标签就不能正常工作。
Try like that:试试这样:
<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>
From the official Vue Style Guide :来自官方的Vue 风格指南:
Components that self-close communicate that they not only have no content, but are meant to have no content.
自关闭的组件表明它们不仅没有内容,而且意味着没有内容。 It's the difference between a blank page in a book and one labeled “This page intentionally left blank.”
这是书中空白页与标有“此页故意留白”的区别。 Your code is also cleaner without the unnecessary closing tag.
您的代码也更干净,没有不必要的结束标记。
Unfortunately, HTML doesn't allow custom elements to be self-closing - only official “void” elements.
不幸的是,HTML 不允许自定义元素自动关闭——只有官方的“void”元素。 That's why the strategy is only possible when Vue's template compiler can reach the template before the DOM, then serve the DOM spec-compliant HTML.
这就是为什么只有当 Vue 的模板编译器可以在 DOM 之前到达模板,然后提供符合 DOM 规范的 HTML 时,该策略才有可能。
You are not allowed to use self-closing tags, so instead of <todo-item />
use <todo-item></todo-item>
不允许使用自闭合标签,所以不要使用
<todo-item />
使用<todo-item></todo-item>
https://github.com/vuejs/vue/issues/1036 https://github.com/vuejs/vue/issues/1036
Not a valid HTML5 components it seems.看起来不是一个有效的 HTML5 组件。
Do you use SFC or usual HTML files?您使用 SFC 还是通常的 HTML 文件? Maybe the problem is that HTML parser doesn't allow to use
<todo-item>
inside <ul>
.也许问题在于 HTML 解析器不允许在
<ul>
中使用<todo-item>
> 。 Try to use <li :is="'todo-item'" v-for...>
instead (it's works in your codepen)尝试使用
<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://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.