英文:
Nested template tag does not render page in vuejs 3
问题
I want to make a table that expands with a click. I am trying to reproduce this example https://vuetifyjs.com/en/components/data-tables/basics/#expandable-rows, however for some reason the nested tag gives a problem when rendering. I did some tests, if I use the following code only the word bye is displayed.
<template>
<h1>bye</h1>
<template>
<h1>hi</h1>
</template>
</template>
Thanks in advance.
英文:
I want to make a table that expands with a click. I am trying to reproduce this example https://vuetifyjs.com/en/components/data-tables/basics/#expandable-rows, however for some reason the <template> nested tag gives a problem when rendering. I did some tests, if I use the following code only the word bye is displayed.
<template>
<h1>bye</h1>
<template>
<h1>hi</h1>
</template>
</template>
Thanks in advance
答案1
得分: 3
你需要告诉Vue何时以及如何渲染嵌套的模板标签。请参阅文档：
> 仅当使用以下指令之一时，才会触发对<template>的特殊处理：
>
> * v-if、v-else-if或v-else
> * v-for
> * v-slot
>
> 如果没有这些指令中的任何一个存在，那么它将被渲染为本机的<template>元素。
在你的情况下，因为你没有提供以上任何指令，<template>只是本机HTML模板元素。这些元素不会被渲染，除非通过JavaScript，如MDN文档中所述。
> <template> HTML元素是一种机制，用于保存在页面加载时不立即渲染但可能随后在运行时使用JavaScript实例化的HTML。
如果你想使内部的<h1>hi</h1>成为一个隐藏的可展开元素，无论如何，你都需要提供某种v-if指令来控制该行为，一旦这样做，它将有能力被渲染。
英文:
You have to tell Vue how and when to render a nested template tag. See the documentation:
> The special handling for <template> is only triggered if it is used with one of these directives:
>
> * v-if, v-else-if, or v-else
> * v-for
> * v-slot
>
> If none of those directives are present then it will be rendered as a native <template> element instead.
In your case, because you've not given any of the above directives, <template> is just the native HTML template element. These elements don't get rendered unless through JavaScript as described in the
MDN docs
> The <template> HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.
If you're trying to make the inner <h1>hi</h1> a hidden, expandable element, you'll need to provide some kind of v-if directive anyways to control that behavior, and once you do, you'll give it the ability to be rendered.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论