Vue入门之旅:一报错 Unknown ... make sure to provide the "name" option及error compiling template
报错一: Unknown custom element: <custom-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option
代码:
html
<custom-select v-bind:list="list2"></custom-select>
js
new Vue({
el: "#app",
data:{
list1: [{"name":"beijing"}, {"name" : "hangzhou" }],
list2: ["2017-1-1", "2017-3-3"]
}
});
//<li class="match-list-li">'+value.name+'</li>
Vue.component("custom-select", {
data: function(){
return {
selectShow : false,
val: ""
};
},
props: ["list"],
template: `
<input type="text" class="form-control" placeholder='press "enter" to match the Employee'
@click="selectShow = !selectShow"
:value="val"> <match-list v-show="selectShow"
:list="list"
v-on:received="changeValueHandler"
></match-list> `,
methods : {
//v-on:received 订阅事件
changeValueHandler(value){
this.val = value; }
}
});
//child
Vue.component("match-list", {
props: ["list"],
template: `
<ul class="repo-admin-match">
<li class="match-list-li" v-for="item of list" @click="changeValueHandler(item)">{{item}}</li>
</ul>
`,
methods : {
changeValueHandler : function(name){
//在子组件中有交互
//告知父级 改变val 需发出一个自定义事件
this.$emit("received", name);
}
}
});
报错原因:
先新建了Vue(new Vue),然后注册组件(Vue.component) 。把顺序颠倒一下即可解决
------------------------------------
报错2:error compiling 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.大意应该是Component template应该包含一个确切存在的根元素
所以 我用<section class="wrap"></wrap>包裹起来
Vue入门之旅:一报错 Unknown ... make sure to provide the "name" option及error compiling template的更多相关文章
- scp使用加密算法报错unknown cipher type
为了提高scp的传输速度指定了scp的加密算法为arcfour $ scp -c arcfour localFile userName@remoteIP:remoteFile 得到报错unknown ...
- vue使用v-for时vscode报错 Elements in iteration expect to have 'v-bind:key' directives
vue使用v-for时vscode报错 Elements in iteration expect to have 'v-bind:key' directives Vue 2.2.0+的版本里,当在组件 ...
- jmeter------reponse报错”Unknown column 'XXXXX' in 'where clause'“
一.问题描述 jmeter添加了与数据库mysql的连接,编写完JDBC Request之后,运行提示报错”Unknown column 'be7f5b6e750bb6becf855386338644 ...
- springboot项目POM文件第一行报错 Unknown Error
改成 war 不错了,但是打包麻烦 pom 文件报错 UnKnown Error第一次碰到这个问题,花了几个小时才解决,除了UnKnown 没有任何提示.网上搜的大部分情况都不是我遇到的. 还是没有解 ...
- 使用spring boot 2.1.8生成的maven项目pom.xml第一行报错unknown error
问题:eclipse neon4.6.3新建springboot项目时pom.xml报错unknown error 原因: spring boot 2.1.8更新了maven插件,eclipse不兼容 ...
- vuex2 mapActions 报错 `unknown action type: xxxx`
export const setBreadCrumb = ({ dispatch }, data) => { dispatch('SET_BREADCRUMB', data) } 当调用的时候报 ...
- 解决centos7下 selenium报错--unknown error: DevToolsActivePort file doesn't exist
解决centos7下 selenium报错--unknown error: DevToolsActivePort file doesn't exist 早上在linux下用selenium启动Chro ...
- springboot项目的maven的pom.xml文件第一行报错 Unknown Error
springboot项目的maven的pom.xml文件第一行报错 Unknown Error https://blog.csdn.net/mini_jike/article/details/9239 ...
- idea使用Vue的v-bind,v-on报错
参考解决在WebStorm中使用Vue的v-bind,v-on报错 File-->Settings-->Editor-->Inspections-->XML 把 Unbound ...
随机推荐
- 将table中的值转换成json格式传到后台接收处理。
table数据 <table style="border:1px" id="tableID"> <tr> <th>编号< ...
- STL容器分析--stack
stack,顾名思义,表示栈,先进后出.
- NoSQL(四)
mongodb介绍 https://www.yiibai.com/mongodb/mongodb_drop_collection.html 1.文档性数据库类似于json对象,分布式 mongodb安 ...
- 取SQL分组中某几行数据
常用的方法有:子查询.ROW_NUMBER.APPLY,总体感觉还是ROW_NUMBER比较直观 if OBJECT_ID('testGroup') is not null drop table te ...
- window下安装Node.js NPM
一.安装Node.js 下载地址:http://nodejs.org/download/ 1..msi文件,直接安装,包括了npm,结束. 2..exe文件,把node.exe所在主目录,加入到系统P ...
- 关于scut PersonalCacheStruct<>.foreach
经过测试PersonalCacheStruct<>.foreach并不会遍历所有数据,只会遍历有session的数据.又或者是缓存还没销毁的数据. 但ShareCacheStruct< ...
- file's owner以及outlet与连线的理解
转自:http://www.cnblogs.com/martin1009/archive/2012/06/01/2531028.html xib文件本身可以看做是一个xml,app启动的时候会根据xm ...
- C++忽略字符大小写比较
在项目中用到对两个字符串进行忽略大小写的比较,有两个方法实现 1.使用C++提供的忽略大小写比较函数实现 代码实现: /* 功能 :忽略大小写进行字符串比较 */ #ifdef __LINUX__ # ...
- CentOS/Linux 网卡设置 IP地址配置永久生效
CentOS/Linux下设置IP地址 1.临时生效设置 1.1修改IP地址 #ifconfig eth0 192.168.100.100 1.2修改网关地址 #route add default g ...
- Lua一般都用来干什么,有什么优点
Lua一般用于嵌入式应用,现在越来越多应用于游戏当中,魔兽世界,愤怒的小鸟都有用到. Lua极易嵌入到其他程序,可当做一种配置语言. 还有很多需要性能的地方,比如:游戏脚本,nginx,wiresha ...