How to make Vue.js directive working in an appended HTML element?

To make Vue.js directives work in dynamically appended HTML elements, you can use the v-html directive to bind HTML content that contains Vue directives.

However, note that using v-html can pose security risks if the HTML content is not trusted.

We can use:

1. Dynamically Append HTML

Append the HTML content containing Vue directives to an element in your Vue component or template.

2. Use v-html Directive

Use the v-html directive to bind the dynamically generated HTML content. This will ensure that Vue.js processes the directives within the HTML content.

For example:

<template>
  <div>
    <!-- Dynamic HTML content -->
    <div v-html="appendedHtml"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      appendedHtml: ''
    };
  },
  methods: {
    appendHtml() {
      // Suppose you have dynamically generated HTML content
      const dynamicHtml = `<div>{{ message }}</div>`;
      
      // Assign the dynamic HTML content to the data property
      this.appendedHtml = dynamicHtml;
    }
  },
  mounted() {
    // Call the method to append HTML content
    this.appendHtml();
  },
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

In this example, we have a Vue component with a appendedHtml data property.

In the mounted() hook (or wherever appropriate), we call a method (appendHtml) to generate the dynamic HTML content.

The dynamic HTML content contains a Vue directive ({{ message }}) which will be processed by Vue.js.

We bind the appendedHtml data property to an element using the v-html directive, which instructs Vue to render the HTML content and process any directives within it.

Keep in mind that when using v-html, you should ensure that the HTML content is trusted to prevent XSS (cross-site scripting) attacks.

Always sanitize user input or any dynamically generated HTML content before using v-html.