Vue &带模板标签的条件渲染 [英] Vue & conditional rendering with template tag
问题描述
我正在尝试遵循文档:
但是由于某种原因,我的模板没有按预期工作,一旦我放入 <template v-if="variable">
vue 就无法呈现任何内容.
有什么建议吗?
演示问题的片段:
https://jsfiddle.net/o2tL2ems/1/
关于 vue.js 有一点需要了解,Peter 在评论中指出.模板不能是根元素,一般根标签只能是一个.
所以当你有这样的模板时:
你基本上是在向 vue.js 询问问题.带有 okBoom 的 div 结束后,Vue 将停止解析您的模板.
网上到处都有和我类似的问题:
简而言之解决方案.将您的模板包装到 master span、div 或 transition 中(不过这个看起来有点老套,另一方面它不会生成不必要的 html 标签).
I am trying to follow documentation:
But for some reason my template is not working as expected, as soon as I put <template v-if="variable">
vue fails to render anything.
<script type="text/x-template" id="dashboard-inititial-message">
<template v-if="okBoom">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<div v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<div v-else>
<p>ELSE</p>
</div>
</script>
Any advice?
Snippets that demonstrate problem:
https://jsfiddle.net/o2tL2ems/1/
There is a thing to know about vue.js, Peter pointed it out in a comment. Template cannot be a root element and in general root tag can be only one.
So when you have template like this:
<script type="text/x-template" id="dashboard-inititial-message-mk1">
<div v-if="okBoom">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<h3>adas</h3>
<div v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
</script>
You basically asking vue.js for problems. Vue will stop parsing your template as soon as div with okBoom ends.
There are questions similar to mine all over the internet:
Solution in short. Wrap your template into master span, div or transition (this one however seems to be a bit hacky, on the other hand it won't generate unnecessary html tags).
这篇关于Vue &带模板标签的条件渲染的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!