在组件模板中使用 <template></template> 标签答案

【问题标题】：Using the <template></template> tag inside component template在组件模板中使用 <template></template> 标签
【发布时间】：2017-10-11 03:45:21
【问题描述】：

在处理看起来像这样的组件时。

...
props: [
    'fType',
    'fName',
    'fChoiceValue',
],
template: `
    <template v-if="fType == ('text' || 'password')">
        <input v-bind:type="fType" v-bind:name="fName">
    </template>
`,

我发现 vue 不会在 <template> 标签之间渲染任何东西。不使用<span></span> 代替<template></template> 的正确方法是什么？

【问题讨论】：

标签： vue.js

【解决方案1】：

Vue 会就此发出警告。

不能使用<template> 作为组件根元素，因为它可能包含多个节点。

也就是说，由于您不想换行并从 @Phil 借用（您问题中的语法将始终以 fType 等于 text 进行评估），您可以将输入呈现为根。

template: `
  <input v-if="fType == 'text' || fType == 'password'" v-bind:type="fType" v-bind:name="fName">
`,

Example.

【讨论】：

很遗憾，vue 没有在控制台抛出任何错误。几个小时后，我遇到了“文本”的问题 || '密码' - 我不知道我在想什么；并最终使用了 lodash indexOf。谢谢。
@Dayo 在开发过程中，不要使用 min 版本的 Vue。那是生产版本，它不会在控制台中显示警告。
@Bert...感谢您的提醒。我现在看到了所有的警告和错误。