Vue.js component issue

Question

js i'm starting to catch up on it but i'm stuck on components would appreciate your help thanks

//here is my js

Vue.component('thatsCool', {

      template: document.querySelector('#myOwnTemplate'),

      data: function() {
        return {
           helloWorld: 'thats cool',
        };
      },

});

new Vue({
    el: 'body',
});

//and this is my html

<! DOCTYPE html>
<html>
     <head>
        <title>playing with Vue components</title>
     </head>
    <body>

        <thatsCool></thatsCool>

        <script id="myOwnTemplate" type="x/template">
            <p v-text="helloWorld"></p>
        </script>

        <script src="vue.js"></script>
        <script src="component.js"></script>
    </body>
</html>

mauricius · Accepted Answer · 2015-06-20 13:22:25Z

1

There are a couple of errors in your code. Use dash-separated convention for your components and simple handlebar notation for string output. Try with this code:

HTML

<thats-cool></thats-cool>

<script id="myOwnTemplate" type="x-template">
    <p>{{ helloWorld }}</p>
</script>

JS

Vue.component('thats-cool', {

      template: '#myOwnTemplate',
      replace : true,

      data: function() {
        return {
           helloWorld: 'thats cool',
        };
      }
});

Note that the option 'replace : true' replaces the original template's content of el instead of appending to it.

answered Jun 20, 2015 at 13:22

mauricius

1163 bronze badges

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

1 Comment

yoel neuman Over a year ago

thanks a million, and the breaking problem was like you said with the component name casing that has its strict rules and even thats-Cool with an upper-case c will not work

Collectives™ on Stack Overflow

Vue.js component issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related