How can I pass in rendered HTML to a vue property?

Question

I'm using vue-material and I have:

  <md-dialog-confirm
    :md-active="true"
    md-title="Make an Outboud Call"
    md-confirm-text="Agree"
    md-cancel-text="Disagree"
    md-content="some <p>HTML</p> here"
    @md-cancel="$emit('closeModal')"
    @md-confirm="$emit('accept')"
  >

For md-content, I can pass HTML but want it to be rendered via the Vue.js template engine so I can use my {{template interpolation }} as needed.

Can someone please help?

tony19 · Accepted Answer · 2022-07-15 22:38:08Z

2

You could pass a dynamically generated HTML. If it is just a simple case, you could even do it inline with a template string:

  <md-dialog-confirm
    :md-active="true"
    md-title="Make an Outboud Call"
    md-confirm-text="Agree"
    md-cancel-text="Disagree"
    :md-content="`some text with the value <b>${yourVariable}</b> here`"
    @md-cancel="$emit('closeModal')"
    @md-confirm="$emit('accept')"
  >

Note the : in front of md-content which is the shorthand for v-bind.

edited Jul 15, 2022 at 22:38

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 29, 2019 at 21:10

emrekaraca

443 bronze badges

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

Collectives™ on Stack Overflow

How can I pass in rendered HTML to a vue property?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related