Vue.js component issue -


js i'm starting catch on i'm stuck on components appreciate thanks

//here js

vue.component('thatscool', {        template: document.queryselector('#myowntemplate'),        data: function() {         return {            helloworld: 'thats cool',         };       },  });  new vue({     el: 'body', }); 

//and html

<! doctype html> <html>      <head>         <title>playing 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> 

there couple of errors in code. use dash-separated convention components , simple handlebar notation string output. try 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 option 'replace : true' replaces original template's content of el instead of appending it.


Comments

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -