How To Run Script In V-html

I get embed codes (Instagram, Twitter and so on) from database. How to bind them to a vue component? Is there any way for executing script tag in v-html?

Solution 1:

Short answer: You can't. Your browsers blocks the execution of script tags once the dom has loaded.

Long answer: You could try matching the src attribute of the script and fetch + evaluate it, or match the inner content of the div and evaluate it, but this is not recommended.

Solution 2:

For the purpose of the title, the browser will block you.

However, for the purpose of the question, you can easily predict/list the embed codes you want to support, so this is something you could do:

if (window.twttr) {
  // The script is already loaded, so just reload the embedswindow.twttr.widgets.load();
} elseif (!document.getElementByID('twttr-widgets')) {
  const embed = document.createElement('script');
  embed.id = 'twttr-widgets'
  embed.src = 'https://platform.twitter.com/widgets.js';
  document.body.appendChild(embed);
  // And when the script loads, the embeds will load too
}

This can easily be replicated for most embed libraries that allow you to "reload" all the widgets on the page:

• FacebookFB.XFBML.parse
• Twittertwttr.widgets.load
• Instagraminstgrm.Embeds.process