CODEWITHSUNDEEP
vue.js
user1830108
user1830108

Reputation: 193

VueJs component undefined

I am new to . 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'
})

Upvotes: 0

Views: 2530

Answers (1)

Bert
Bert

Reputation: 82489

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/[email protected]"></script>
<div id="example-2">
  <comp1></comp1>
</div>

Upvotes: 1

Related Questions