Vue.js Render Template with Vue.js syntax

Question

Data Variable

 var data = {
        template:`<div class="box-word-cent">
           <h2>{{ title }}</h2>
           <p>{{ desc }}</p>
         </div>`,

        content:{
           title:'This is Title',
           desc:'This is. Description'
        }
     }

Vue

var vm = new Vue({
    el:'#app',
    data: data
});

Html

<div id="app">
     <div v-html="data.template"></div>
</div>

I try to separate content data from template, but it seems like not work.

any one can help to achieve this conception ?

Please add language hints so that your source code is displayed with highlighting. — Siu Ching Pong -Asuka Kenji-
– Siu Ching Pong -Asuka Kenji-, Commented May 17, 2017 at 2:39
See vuejs.org/v2/guide/syntax.html#Raw-HTML. You cannot use bindings in v-html — Phil
– Phil, Commented May 17, 2017 at 2:50
my idea is saving vue template to database for easy manipulate — Aircon Chen
– Aircon Chen, Commented May 17, 2017 at 2:52
@Phil thanks, i've read it yesterday, v-html cannot render vue template, but how to implement this idea .... it bother me for 2 days... T.T — Aircon Chen
– Aircon Chen, Commented May 17, 2017 at 2:57

Bert · Accepted Answer · 2017-05-17 02:52:45Z

1

Try

var data = {
    template:`<div class="box-word-cent">
       <h2>{{ title }}</h2>
       <p>{{ desc }}</p>
     </div>`,

    content:{
       title:'This is Title',
       desc:'This is Description'
    }
 }

And

var vm = new Vue({
    el:'#app',
    template: data.template,
    data: data.content
});

And just

<div id="app"></div>

This is an unusual way to write your Vue, however.

edited May 17, 2017 at 2:52

answered May 17, 2017 at 2:49

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

4 Comments

Phil Over a year ago

Looks good though you're missing a comma after data.template ~ jsfiddle.net/n24jo0dc/72

Bert Over a year ago

@phil oops! Thank you.

Aircon Chen Over a year ago

@BertEvans thank you, it's work. do you have any suggestion about saving template with vue syntax to database ?

Bert Over a year ago

@AirconChen I've never personally tried saving template to the database.

Collectives™ on Stack Overflow

Vue.js Render Template with Vue.js syntax

Data Variable

Vue

Html

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Data Variable

Vue

Html

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related