带有模板标签的 Vue 和条件渲染答案

【问题标题】：Vue & conditional rendering with template tag带有模板标签的 Vue 和条件渲染
【发布时间】：2017-07-11 11:09:50
【问题描述】：

我正在尝试遵循文档：

https://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/

【问题讨论】：

我收到警告[Vue warn]: Cannot use <template> as component root element because it may contain multiple nodes。也许尝试将模板元素包装在一个 div 中。
我想知道，我的控制台中没有收到任何警告，是否必须打开它，如果是这样：如何？我在浏览器中以最简单的方式使用 vue。
我不确定。我认为警告是默认显示的。看来您可以使用 Vue.config.devtools = false; 关闭它们
是的，先生，坦克你。你帮了我很多。 :-) 我使用的是生产 vue（min.js）而不是 dev one（非缩小）。一旦我交换了它们，我就会收到多汁的警告。

标签： javascript vuejs2 web-frontend

【解决方案1】：

关于 vue.js 有一点需要了解，Peter 在评论中指出了这一点。模板不能是根元素，一般根标签只能是一个。

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

<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

简而言之。将您的模板包装到主跨度、div 或转换中（然而，这个似乎有点 hacky，另一方面它不会生成不必要的 html 标记）。

【讨论】：

【解决方案2】：

我为加载器使用条件模板渲染（当服务器请求发生时）

new Vue({
  el: "#app",
  template:
  `<div v-else class='somePage'>
       <template v-if="isLoading">
         <div>LOADING...</div>
       </template>
       <template v-else>
         <h1>title</h1>
         <p>The final rendered result will not include the "template" element.</p>
       </template>
    </div>`,
  data: () => ({
    isLoading: true
  }),
  mounted() {
    setTimeout(this.getData.bind(this), 1500);
  },
  methods: {
		async getData() {
      // await axios ...do some request...
      this.isLoading = false
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

【讨论】：