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>