帶有模板標簽的 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

關於 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 將停止解析您的模板。

網上有很多和我類似的問題：

• 奇怪的模板和 vue.js 的根節點

簡而言之，解決方案。 將您的模板包裝到主跨度、div 或轉換中（然而，這個似乎有點 hacky，另一方面它不會生成不必要的 html 標記）。

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