VueJs component undefined

Question

I am new to vue.js. The component, comp1 doesn't appear to work.

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

Your component should look like this:

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

You were missing a single quote here: 'comp1, {, and you have to surround multi-line templates with backticks, `.

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>