javascript - Using template string as Vue template - Stack Overflow

admin管理员组

文章数量:1293672

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=".5.17/vue.js"></script>

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./ajax/libs/vue/2.5.17/vue.js"></script>

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

• javascript
• vue.js

Share Improve this question Follow edited Mar 11, 2019 at 11:21 T.J. Crowder 1.1m199199 gold badges2k2k silver badges1.9k1.9k bronze badges asked Mar 11, 2019 at 11:11 navinavi 5311 gold badge11 silver badge33 bronze badges 2

• 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 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./questions/358992 – T.J. Crowder Commented Mar 11, 2019 at 11:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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>`

After search a lot ways to implement ponent 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 piler 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, }

A couple of issues:

1. As Sergeon said, there must be one root node, not two.

2. 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./ajax/libs/vue/2.5.17/vue.js"></script>

本文标签： javascriptUsing template string as Vue templateStack Overflow