Vuejs template not displayed
Question
I followed this Vuejs video tutorial : https://laracasts.com/series/learn-vue-2-step-by-step/episodes/9?autoplay=true
My HTML seems like him (except his design) :
<div id="app">
<message title="My Component title" body="Lorem ipsum dry"></message>
</div>
Then my vuejs code :
<script type="text/javascript" src="{{ asset('js/vue.js') }}"></script>
<script>
new Vue({
el: '#app',
delimiters: ['${', '}']
});
Vue.component('message', {
props: ['title', 'body'],
template: `
<article class="message">
<div class="message-header">
${title}
</div>
<div class="message-body">
${body}
</div>
</article>
`
});
</script>
I changed Vuejs variable delimiters because it's a twig template file. Inspecting the source code in the browser, the HTML code is not replaced by the code defined in the template... I don't see why.
1 answers
solution1
1 ACCPTED 2018-03-23 17:01:02
You are declaring your template using JavaScript template strings ( ` ).
You need to escape ${ in template strings, because they have specific meaning for them. Escape like: \\${
Also, you need to declare the delimiters on the component itself.
JSBin demo: http://jsbin.com/notocozepi/edit?html,js,output
Source:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<message title="My Component title" body="Lorem ipsum dry"></message>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script>
Vue.component('message', {
props: ['title', 'body'],
delimiters: ['${', '}'],
template: `
<article class="message">
<div class="message-header">
\${title}
</div>
<div class="message-body">
\${body}
</div>
</article>
`
});
new Vue({
el: '#app',
delimiters: ['${', '}']
});
</script>
</body>
</html>
One last note: mind the order. The components must be defined before they are used.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.