Passing html into Vue component

Question

At the moment I pass some parameters into a vue component

 <Slider
      :images= "['/img/work/slide2.png', '/img/work/slide2.png', '/img/work/slide3.png']"
      :html="['<div>hello</div>', '<div>goodbye</div>']"
    </Slider>

The slider is either an 'html' slider or one with images.

This works fine although the html I pass in is going to get a lot more complex, maybe 30 lines and this will be harder to read and manage as params.

Can I pass in an external reference and pull that into the component?

<div v-for="content in html">
    <div class="work-slide">{{ content }}</div>
</div>

As you can see the loop in the component is a very simple v-for.

tony19 · Accepted Answer · 2022-07-15 19:51:58Z

38

Don't pass HTML using attributes but using Slots:

Suppose we have a component called my-component with the following template:

<div>
  <h2>I'm the child title</h2>
  <slot>
    This will only be displayed if there is no content
    to be distributed.
  </slot>
</div>

And a parent that uses the component:

<div>
  <h1>I'm the parent title</h1>
  <my-component>
    <p>This is some original content</p>
    <p>This is some more original content</p>
  </my-component>
</div>

The rendered result will be:

<div>
  <h1>I'm the parent title</h1>
  <div>
    <h2>I'm the child title</h2>
    <p>This is some original content</p>
    <p>This is some more original content</p>
  </div>

</div>

You can also use Named Slots if you want to pass more than one field containing HTML.

edited Jul 15, 2022 at 19:51

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 5, 2017 at 10:45

str

45.5k18 gold badges117 silver badges134 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 21:05:48Z

7

You can inject raw html into Vue components with the v-html directive.

edited Jul 15, 2022 at 21:05

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 19, 2019 at 19:28

David Mold

3174 silver badges6 bronze badges

3 Comments

Thomas Kilkelly Over a year ago

While this would work, you do not get any data-bindings this way.

David Mold Over a year ago

You can certainly bind data with v-html, e.g. <p v-html="mydataVariable"></p>

Fanky Over a year ago

How do I pass the html to mydataVariable from the html which uses the component?

Erik Basañez · Accepted Answer · 2021-06-03 13:42:56Z

2

I had similar problem in a project some months ago. I fixed it passing the HTML code in base64 format.

my parent component :

<wysywyg id="ssaasa" :bal="to64('<strong>Me</strong>')"></wysywyg>

my method:

methods: {
        to64(html) {
            return btoa(html)
        }
    }

my component:

<template>
    <div class="RenderHTMLEditor mx-3">
        <label class="subtitle-1 pb-3">{{label}}</label>
        <textarea html="true" v-model="to64"
        width="100%"
        :style="'height:'+height+'px;'"
        wysywyg="true"
        :name="id" :id="id"
        class="tinywy">
        </textarea>
    </div>
</template>

<script>
export default {
    props: ['label', 'id', 'height', 'bal'],
    data: function() {
        return {
            
        }
    },
    computed: {
        to64: function() {
            return atob(this.bal)
        }
    },
    mounted: function() {
        window.initWy(this.id)
    }
}
</script>

<style scoped>
.RenderHTMLEditor {
    width: 100%;
}
</style>

answered Jun 3, 2021 at 13:42

Erik Basañez

757 bronze badges

1 Comment

Jack_Hu Over a year ago

Congratulations. You've just exposed your site to the wonderful world of XSS attacks! :) - Although a novel solution to this problem, please don't do this, especially with v-model. Slots exist for this very use-case, and will protect you (at least partially) from exposing yourself to attacks. You're one malicious eval() away from disaster.

Collectives™ on Stack Overflow

Passing html into Vue component

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related