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

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

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?

Solution

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.