Using template string as Vue template

Question

I am in the process of learning Vue. As far as I know I should be able to use a simple template string as a template in Vue. But for some reason, Vue renders only the first html tag.

Vue.config.devtools = true;

let template = `<h2>Hi {{name}}</h2><h1>{{age}}</h1>`

const vm = new Vue({
    el: '#app',
    data() {
        return {
            name: 'Name',
            age: 23,
            message: 'hello'
        }
    },
    template,
    methods: {
        greet(e) {
            return this.message = e.target.value
        },
        esc(e) {
            e.target.value = ''
        }
    }
})

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

This renders only "Hi Name". Why isn't age showing up?

Side note: It's a "template" (or "template literal"), not a "template string". If it's untagged, it evaluates to a string, but if it's used with a tag function, it doesn't necessarily. — T.J. Crowder
– T.J. Crowder, Commented Mar 11, 2019 at 11:20
Nice one including the snippet!! Just FYI, the HTML pane in Stack Snippets is automatically put inside a body element, so you don't include html, head, or body there. I've updated the snippet to fix that. More about creating snippets: meta.stackoverflow.com/questions/358992 — T.J. Crowder
– T.J. Crowder, Commented Mar 11, 2019 at 11:23

Sergeon · Accepted Answer · 2019-03-11 11:15:46Z

3

Vue templates should have only one root node. I think you should have a message in your console warning about that.

Try:

let template = `<div><h2>Hi {{name}}</h2><h1>{{age}}</h1></div>`

answered Mar 11, 2019 at 11:15

Sergeon

6,7982 gold badges29 silver badges44 bronze badges

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

Comments

Fernando Cesar · Accepted Answer · 2022-09-24 17:51:46Z

1

After search a lot ways to implement component template even this one - all searchers need to know it must chance this flag to true - and add 10Kb to final result hahaha - this little one will add the compiler to properly do work - by default its false

// if you are using VUE -> vue.config.js module.exports = { runtimeCompiler: true };

// if you are using VUE+QUASAR -> quasar.config.js add at -> build: { vueCompiler: true, }

answered Sep 24, 2022 at 17:51

Fernando Cesar

1612 silver badges6 bronze badges

Comments

T.J. Crowder · Accepted Answer · 2019-03-11 11:17:36Z

A couple of issues:

As Sergeon said, there must be one root node, not two.
Vue's templates are different from JavaScript's template literals. You've used Vue's syntax ({{name}}), but in a JavaScript template literal. You probably wanted a simple string. (Although you could certainly use an untagged template literal instead if you wanted, since they evaluate to strings. Just not that {{name}} and such placeholders are handled by Vue, and ${name} and such will be handled by the JavaScript template itself.)

Fixing those, it seems to work:

Vue.config.devtools = true;

let template = "<div><h2>Hi {{name}}</h2><h1>{{age}}</h1></div>";

const vm = new Vue({
    el: '#app',
    data() {
        return {
            name: 'Name',
            age: 23,
            message: 'hello'
        }
    },
    template,
    methods: {
        greet(e) {
            return this.message = e.target.value
        },
        esc(e) {
            e.target.value = ''
        }
    }
})

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Collectives™ on Stack Overflow

Using template string as Vue template

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related