VueJs组件未定义

Question

我是vue.js的新手。组件comp1似乎不起作用。

HTML

<div id="example-2">
  <comp1></comp1>
</div>

脚本

var data1={selected: null, items:["degradant", "impurity"]};

Vue.component('comp1, {
  template:'<select v-model="selected">
             <option disabled value="">Please select</option>
             <option v-for="item in items" :value="item">{{item}}</option> 
           </select>',
  data: function(){
    return data1
  }            
});

new Vue({
  el: '#example-2'
})

Answer 1

您的组件应如下所示：

Vue.component('comp1', {
  template:`<select v-model="selected">
             <option disabled value="">Please select</option>
             <option v-for="item in items" :value="item">{{item}}</option> 
           </select>`,
  data: function(){
    return data1
  }            
});

你在这里错过了一个引号：'comp1, {，你必须用反引号包围多行模板，`。

console.clear()

var data1={selected: null, items:["degradant", "impurity"]};

Vue.component('comp1', {
  template:`<select v-model="selected">
             <option disabled value="">Please select</option>
             <option v-for="item in items" :value="item">{{item}}</option> 
           </select>`,
  data: function(){
    return data1
  }            
});

new Vue({
  el: '#example-2'
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="example-2">
  <comp1></comp1>
</div>