Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

vue菜鸟一枚,下载github上的代码来框架和思路,添加自己新的代码调试的时候,发现了一个错误,,具体报错如:

 error  in ./src/components/page/Test.vue

(Emitted value instead of an instance of Error)
  Vue template syntax error:

  Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

 @ ./src/components/page/Test.vue 5:2-167
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client babel-polyfill ./src/main.js

 刚开始这样写得时候是没有发现啥错误的,我只是在后面添加一个<div></div>或是加了别的就说出现这个错误

<template>
    <el-button type="primary">{{test1}}</el-button>
</template>

  原来vue模板只能有一个根对象

所以你想要出现正常的效果,你的用一个div来或是别的标签来包裹全部的元素

正确的写法就是:

<template>
    <div>
        <el-button type="primary">haha1</el-button>
        <div>hahhaa</div>
        <el-input type="text" placeholder="测试一下"></el-input>
        <h1>{{test1}}</h1>
    </div>
</template>

 

时间: 2024-11-05 15:59:03

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.的相关文章

- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 解决方案

<template> <div>{{hello}}</div> <button @click="addOne">add one</button> <button @click="minusOne">minus one</button> </template> 在*.vue组件里有这么一段. 报错信息: (Emitted value instead of an instan

vue报错:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

在.vue文件中引入了 element-ui 的 table 和 pagination 组件后,报错:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.[翻译:组件模板应该只包含一个根元素. 如果您在多个元素上使用v-if,请使用v-else-if来代替它们.] 报错文

Vue报错——Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

出现这种错误的原因是因为Vue的模板中只能有一个根节点,所以在<template>中尝试插入第二个元素时就会报这个错. 例如: HTML: <template> <p>{{msg}}</p> <p>{{msg}}</p> </template> 结果: 解决办法: 将<template>中的元素用一个<div>包裹起来即可.

组件嵌套时报:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

在组件嵌套的过程中,报了一个错误: 这里报错的原因是:vue的组件(模板)只能有一个根节点,即.vue文件中的<template>标签下只能有一个子元素. 因此,建议大家在写.vue组件的时候,最好在<template>下添加一个标签(比如div),在这个标签里面写我们的组件. 例如: 1 <template> 2 <div> 3 <!--你的组件代码--> 4 </div> 5 </template> 我这边就是用这种方

Weblogic发布小问题——The root element weblogic-web-app is missing in the descriptor file

前几天发布项目遇到这样一个小错误,在此记录一下,以便加深一点印象,下次好解决类似的问题! (对应的应用服务器是WebLogic Server 版本: 10.3.6.0,应用是以文件夹的形式发在服务器的对应目录下的) 1:错误的信息如下图所示 2:分析及解决这个小问题的过程 错误的提示信息还是比较清楚的指出了错误发生的位置和原因的,根据提示信息找到对应的目录查看对应的文件,发现对应的目录下的weblogic.xml文件的内容如下所示 <container-descriptor> <pref

Delphi之创建组件模板(Component Template)

[tip] 组件模板(Component Template)是指修改后保存下来供以后再使用的一个或一组组件. [/tip] 组件模板可用来创建.保存和重复使用组件组.实际上,组件模板不必是一组组件,完全可以是单个组件.举一个小例子对理解组件模板的用途会很有帮助,但先要简要介绍一下Windows编辑控件(edit control). 与所有的Windows控件一样,标准Windows单行编辑控件有若干预定义动作.其中一个动作与Enter键的处理方式有关.如果当光标在编辑框控件上时用户按下Enter

maven web项目的web.xml报错The markup in the document following the root element must be well-formed.

maven项目里面的web.xml开头约束是这样的 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java

[Angular] Test component template

Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'stock-counter', changeDetection: ChangeDetectionStrategy.OnPush, template: ` <div class="stock-counter"> &l

[Vue warn]: Failed to mount component: template or render function not defined.解决方案

命名视图 vue router 里有一个 模式叫做 命名视图 本来一个页面里面只能有一个路由视图 对应 一个组件,现在可以多个路由视图 对应 多个组件. 出错点 点击标签之后,<router-view></router-view>中并没有内容出现.反而控制台中报错了. 原因 就是在写这里的时候,原来都是component,现在是components,多了一个s. . 原文地址:https://www.cnblogs.com/jianxian/p/11063738.html