VueJS Component does not load

Question

I have the following vuejs component. I know that it is a pretty simple example, but still it does not load correctly. Find below my code:

Vue.component('my-component', {
  template: '<div>{{ msg }}</div>',
  data: {
    msg: 'hello'
  }
});

new Vue({
  el: '#app-6'
});

<!DOCTYPE html>
<html lang="en">
<meta>
<meta charset="UTF-8">
<title>Components in Vue.js</title>
</meta>

<body>

  <div id="app-6">
    test
    <my-component></my-component>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
</body>

</html>

Any suggestions what I am doing wrong?

I appreciate your replies!

Define "does not load correctly", are you getting error messages? — zero298
– zero298, Commented Jan 23, 2018 at 7:15

Viplock · Accepted Answer · 2018-01-23 07:24:46Z

4

Data Must be a function always

var data={msg: 'hello'}    
Vue.component('my-component', {
  template: '<div>{{ msg }}</div>',
  data:function() {
       return data;
  }
});

new Vue({
  el: '#app-6'
});

<!DOCTYPE html>
<html lang="en">
<meta>
<meta charset="UTF-8">
<title>Components in Vue.js</title>
</meta>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
  <div id="app-6">
    test
    <my-component></my-component>
  </div>


</body>

</html>

answered Jan 23, 2018 at 7:24

Viplock

3,3191 gold badge26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 00:51:27Z

2

Your data should be a function like this:

data () {
    return {
        msg: 'Hello'
    }
}

More information here: https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

edited Jul 15, 2022 at 0:51

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 23, 2018 at 7:21

Imre_G

2,5251 gold badge20 silver badges36 bronze badges

Comments

Zaking · Accepted Answer · 2018-01-23 07:33:55Z

1

you should do it like this.

Vue.component('my-component', {
  template: '<div>{{ msg }}</div>',
   data: function () {
    return {
      msg: 'Hello'
   }
}
});

answered Jan 23, 2018 at 7:33

Zaking

113 bronze badges

Collectives™ on Stack Overflow

VueJS Component does not load

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related