Vue.js component issue

Question

Vue.js component issue

214 Views Asked by yoel neuman At 16 May 2025 at 04:39

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>

Original Q&A

There are 1 best solutions below

**mauricius** · Accepted Answer

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.

Vue.js component issue

There are 1 best solutions below

Related Questions in VUE.JS

Trending Questions

Popular # Hahtags

Popular Questions