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>包裹起來