VueJs Komponente undefined

Question

Ich bin neu in vue.js. Die Komponente comp1 scheint nicht zu funktionieren.

HTML

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

Script

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

Ihre Komponente sollte wie folgt aussehen:

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 
    }    
}); 

Sie haben hier einen Apostroph fehlt: 'comp1, {, und Sie müssen mehrzeilige Vorlagen mit Backticks umgeben, `.

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>