我在文档中没有看到任何关于此的内容,也许我没有进行足够的搜索,但组件模板似乎与根元素一起工作“更好”(更好的意思是:它在没有根元素的情况下运行 Laravel elixirgulp
但运行gulp --production
仅显示第一个元素)。
我需要在里面只有一个根元素<template>
吗?
换句话说,这个模板代码在 Vue 2 中是否允许?
<template>
<div>A</div>
<div>B</div>
</template>
我在文档中没有看到任何关于此的内容,也许我没有进行足够的搜索,但组件模板似乎与根元素一起工作“更好”(更好的意思是:它在没有根元素的情况下运行 Laravel elixirgulp
但运行gulp --production
仅显示第一个元素)。
我需要在里面只有一个根元素<template>
吗?
换句话说,这个模板代码在 Vue 2 中是否允许?
<template>
<div>A</div>
<div>B</div>
</template>
每个组件必须只有一个根元素。片段实例不再被允许。如果你有这样的模板:
<p>foo</p>
<p>bar</p>
建议将整个内容简单地包装在一个新元素中,如下所示:
<div>
<p>foo</p>
<p>bar</p>
</div>
它可能会编译,但 Vue 会抛出以下警告:
[Vue 警告]:组件模板应该只包含一个根元素:
并且只显示模板中的第一个元素,因此您必须确保将模板包装在一个根级标签中,如下所示:
<template>
<div>
<div>A</div>
<div>B</div>
</div>
</template>
如果您查看以下 JSFiddle 上的开发人员工具控制台,您应该明白我的意思:
https://jsfiddle.net/woLwz98n/
我也会借此机会感谢您的laravel-log-viewer
,我一直在使用它,它非常棒!
是的,Vue 2.0 模板需要具有单个根元素。只需创建一个父 div 并将所有组件 div 放入其中。
<template>
<div>
<div>A</div>
<div>B</div>
</div>
</template>
Vue.js 创建者在这篇文章中提到了同样的内容:
https ://github.com/vuejs/vue-loader/issues/384
除了提供的答案之外,我想我只需加上我的两美分,因为它可能会帮助其他人。我有一个子组件(表格行),我一直在尝试上面提出的解决方案的表格行周围放置 div 包装 - 但后来我意识到父组件是需要包装的部分,而不是子组件&问题得到了解决。因此,如果您在遇到此错误的父/子组件情况下 - 将 div 包裹在您的父模板代码周围。