组件嵌套时报: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),在这个标签里面写我们的组件。
例如:
<template>
<div>
<!--你的组件代码-->
</div>
</template>
我这边就是用这种方法解决的。也希望能帮助到大家。
组件嵌套时报: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之命令行报错: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 解决办法
Failed to compile. ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-5992 ...
- 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 roo ...
- 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添加标签的时候编译报错,报错如下: Component template should contain exactly one root element. If you are u ...
- vue父子组件嵌套的时候遇到 - Component template should contain exactly one root element. If you are using v-i
转自:https://blog.csdn.net/yangyiboshigou/article/details/72084619
- 【错误总结】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.
大致意思是因为模板里面应该包含一个根元素,使用组件的时候应该用div或p标签包起来
- 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-父子组件嵌套的示例
组件注册: // 注册组件 Vue.component('my-component', { template: '<div>A custom component!</div>' ...
- Vue出现Component template should ...
当运行vue出现错误Component template should contain exactly one root element. If you ...的时候,我们只需要将<templa ...
- Vue.js组件嵌套和template外用
Vue.extend组件的嵌套和template外用 组件嵌套分为全局组件嵌套和局部组件嵌套 组件嵌套需要将子元素写在父元素内 子组件必须在父组件中注册之后才能在父组件的模板中使用 全局组件嵌套 Vu ...
随机推荐
- 走进 Visual Studio Mobile Center for Xamarin.Forms
前几篇分别介绍了 Xamarin.Forms 的 MVVM 的 Prism,UITest,Nuint Test,那这样算下来,代码部分基本结构都有了(逻辑就先忽略吧) 那接下来就应该是自动 Build ...
- Leetcode题解(十八)
51.N-Queens ---------------------------------------------------------------------------------分割线---- ...
- 349B - C. Mafia
C - Mafia Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Submit S ...
- 使用Lock锁生产者消费者模式
package com.java.concurrent; import java.util.concurrent.locks.Condition; import java.util.concurren ...
- CSS浮动(Float)(二)
1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相当于浮动起来 ...
- ⑾bootstrap组件 徽章 大屏 页头 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- linux-less
linux-less less是more命令的进化版.拥有与more命令一样的向前向后向下向上的数据查看功能,同时less还可以在查看内容中进行快速查找,关于数据向上向下操作,可以看看这个http:/ ...
- CentOS配置上网
CentOS设置: 进入CentOS命令模式: Centos7更改默认启动桌面(或命令行)模式 vi /etc/inittab:查看启动文件,在该文件中存在两种方式: multi-user.tar ...
- 如何在C#中使用存储过程(SQL Server 2000)
要在C#中使用存储过程,首先看看test表的创建sql语句: create table test55 ( uid int identity(1,1), class1 varchar(20), cl ...
- C# 读写文本文件乱码解决方案
在使用C#对文本文件读取的时候,如果其中包含了中文,经常会出现乱码.一般解决是在StreamReader加一个编码,我使用的是Encoding.UTF8,一般情况下使用这个参数就可以.但是,在这次我使 ...