CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2vue-component
the_yaz2000
the_yaz2000

Reputation: 141

Why doesn't my component template show up in Vue?

I've just started learning Vue. Now I'm trying to build my first component, but the template didn't show up, and the console didn't give me any error. Here's some of my code:

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

and here's a Jsbin with my full code

Upvotes: 2

Views: 712

Answers (1)

Dan
Dan

Reputation: 63059

Your Vue instance needs a mounting id specified in the el property:

var vm = new Vue({ 
  el: '#app',  // Specifying a DOM id "app"
  data() {
    // ...
  }
})

And the app template needs to be wrapped with that same id:

<div id="app">
  <button-counter></button-counter>
</div>

Demo:

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

var vm = new Vue({ 
  el: '#app',
  data() {
    return {
      name:'yazid',
      age:'20',
      date:'press to known the date',
      skills:['HTML','CSS','JS'],
      ele:'<h1> elements from vue js</h1>',
      completed_languages:[{
        lang:'html',
        percent:'90%'
      },{
        lang:'CSS',
        percent:'70%'
      },{
        lang:'JS',
        percent:'70%'
      }]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button-counter></button-counter>
</div>

Upvotes: 3

Related Questions