javascript - Vue 和带模板标签的条件渲染

Question

我正在尝试遵循文档:

• https://v2.vuejs.org/v2/guide/conditional.html

但由于某种原因，我的模板没有按预期工作，我一输入 <template v-if="variable"> vue 无法呈现任何内容。

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

有什么建议吗？

展示问题的片段:

https://jsfiddle.net/o2tL2ems/1/

Answer 1

Peter 在评论中指出了关于 vue.js 的一些事情。模板不能是根元素，一般根标签只能是一个。

所以当你有这样的模板时:

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

您基本上是在向 vue.js 询问问题。一旦带有 okBoom 的 div 结束，Vue 将停止解析您的模板。

网上到处都是类似我的问题:

• Oddity with templates and root node with vue.js

简而言之就是解决方案。将您的模板包装到 master span、div 或 transition 中(然而这个似乎有点 hacky，另一方面它不会生成不必要的 html 标签)。