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.

actually I need both of them.I will use one on some pages, the other on some pages @Cobaltway — Soner
– Soner, Commented Apr 21, 2017 at 8:45
This is pretty old but for future ppl. Check vue web components vuejs.org/guide/extras/web-components.html — Colin Rosati
– Colin Rosati, Commented Nov 24, 2023 at 16:39

CodinCat · Accepted Answer · 2017-04-21 09:52:24Z

23

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
}

edited Apr 21, 2017 at 9:52

answered Apr 21, 2017 at 8:45

CodinCat

16k6 gold badges51 silver badges63 bronze badges

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

1 Comment

Fathy Over a year ago

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

tony19 · Accepted Answer · 2022-07-15 20:27:14Z

10

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

edited Jul 15, 2022 at 20:27

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 16, 2018 at 10:00

mic

4,5151 gold badge22 silver badges33 bronze badges

1 Comment

Prakash Raman Over a year ago

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

Collectives™ on Stack Overflow

How to get html content of component in vue js

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related