How to get html content of component in vue js

Question

I have a html template as below

AdvanceTemplatePage.vue

<template>
    <div class="content edit-page management">
        <md-card class="page-card">
            <md-card-header class="page-card-header">
                <md-card-header-text class="page-title">
                    <div class="md-title">{{ 'AdvanceDetail' | translate }}</div>
                </md-card-header-text>
            </md-card-header>

            <md-card-content class="page-content">
                <div class="info-container">
                    <div class="label">{{ 'AdvanceStatus' | translate }}</div>
                    <div class="value">{{ '@AdvanceStatus' }}</div>
                </div>

                <div class="info-container">
                    <div class="label">{{ 'Amount' | translate }}</div>
                    <div class="value">{{ '@Amount' }} {{ '@Currency' }}</div>
                </div>

                <div class="info-container">
                    <div class="label">{{ 'RefundStartingAt' | translate }}</div>
                    <div class="value">{{ '@RefundStartingAt' }}</div>
                </div>

                <div class="info-container">
                    <div class="label">{{ 'RefundInstallmentQuantity' | translate }}</div>
                    <div class="value">{{ '@RefundInstallmentQuantity' }}</div>
                </div>

                <div class="info-container">
                    <div class="label">{{ 'Description' | translate }}</div>
                    <div class="value">{{ '@Description' }}</div>
                </div>
            </md-card-content>

        </md-card>
    </div>
</template>

I need to access this template html from another page.

I am trying to access html like this on another page, but I do not know how to do it.

import AdvanceTemplatePage from 'pages/print/template/AdvanceTemplatePage.vue';

methods: {
    onPrint() {
        const vm = this;
        const template = new AdvanceTemplatePage({ el: '#templateDiv' })
    }
}

How can i get html info from another page in vue.js

Any help will be appreciated.Thanks.

Solution 1

The template will be compiled to a render function so your code won't work. And basically you can't get the original html template.

I'm not sure what you are trying to do. If you want to get the source template content, the easiest way to achieve this is to save the template in a variable so that you can ref to it in the future.

Note that .vue doesn't support named exports so you need to put this in another .js file:

export const templateOfAdvanceTemplatePage = `
  <div class="content edit-page management">
    <md-card class="page-card">
     ...
    </md-card>
  </div>
`

and in your AdvanceTemplatePage.vue

import templateOfAdvanceTemplatePage from 'path/to/templateOfAdvanceTemplatePage.js'

export default {
  template: templateOfAdvanceTemplatePage,
  ...
}

Now you can simply import templateOfAdvanceTemplatePage everywhere you want since it's just a variable.

If you want the compiled html instead of the source template, I found out a tricky way to achieve. Simply render the component and use innerHTML to get the html:

in another component, you render but hide it, also give it a ref:

<template>
  ...
    <advance-template-page v-show="false" ref="foo"></advance-template-page>
  ...
</template>

now you can get the html content in your methods:

onPrint() {
    const template = this.$refs.foo.$el.innerHTML
}

Solution 2

You can just add <slot></slot> (documentation) to your component

Comments

[Moodie]

Just what I was looking for thanks! vuejs.org/v2/guide/components-slots.html

[Fathy]

any way to handle v-model ? if A is base component and B is external component and B uses v-model from A it fails