CODEWITHSUNDEEP
javascriptvuejs2
TheShun
TheShun

Reputation: 1218

Live preview of customizable HTML Template

I'm building an app where the user can apply a base template and is able to modify only a part of this template.

Each template contains a base html and a customizable html part which is included somewhere in the base template.

my template object :

{
    id: 1,
    name: 'Template name',
    preview: 'http://lorempixel.com/200/180/',

    template: {

        desktopTemplate: {

            html: '<div> Base html template </div>',

            modifiableHtml: '<div> modifiable html part </div>'

            css: ''

        },

    }

}

Each template is different so the customizable part is not always displayed at the same place ( schema http://image.prntscr.com/image/0984fdbf945b47c39eb2330230520e25.png )

I'm trying to do a live preview of the user customization but i'm still new to vue and i don't really find a way to do that.

how can i make this kind of component ? is it even possible in vue ?

Upvotes: 1

Views: 1181

Answers (1)

GuyC
GuyC

Reputation: 6574

Here's an example of how this can work:

new Vue({
    el: '#app',
    data: {
        modifiedHtml: ''
    }
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    <div v-html="modifiedHtml"></div>
    <textarea cols="30" rows="10" v-model="modifiedHtml"></textarea>
</div>

EDIT

Another example using a component to build this:

Vue.component('desktop-template', {
  props: ['parentHtml'],
  template: `
    <div>
      <p>Base html template</p>
      <div v-html="parentHtml"></div>
    </div>
  `,
  data () {
    return {
      css: '',  
    }
  },
})
              
new Vue({
    el: '#app',
    data: {
        modifiedHtml: ''
    }
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    <desktop-template :parent-html="modifiedHtml"></desktop-template>
    <textarea cols="30" rows="10" v-model="modifiedHtml"></textarea>
</div>

All you need to do is use the template of either the component or the root app (both methods now shown) to create what you are doing with desktopTemplate.html, doing so then makes that param redundant.

Upvotes: 1

Related Questions