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
Post a Comment