Vue event handler on dynamically inserted string does not work

Question

This is my code:

<template>
    <div>      
      <div v-html="data"></div> <button v-on:click="replace">Click Me to replace div contents</button>
    </div>
</template>
<script>
export default {
  data() {
    return {
      data: "I will be replaced once you click on button"
    }
  },
  methods: {
    clickMe() {
      alert("worked");
    },
    replace(){
      this.data = "Why does click me not work? It is loaded from server via ajax <a href v-on:click.prevent='clickMe'>Click Me</a>";
    }
  }
};
</script>

Here if I click on Click Me to replace div contents the content is replaced but the event handler clickMe does not fire. This data would come from server and I need to compile this string and use it from within the Vue's context so Vue can handle events etc.

How can I have the dynamic string downloaded from server work? I am using Vue 2.

@samayo: Thanks for replying. When "Click Me to replace div contents" is clicked I would see Why does click me not work? It is loaded from server via ajax <a href v-on:click.prevent='clickMe'>Click Me</a> This is correct however now when I click on Click Me I do not see alert. That is my problem. — Tim Liberty
– Tim Liberty, Commented Nov 9, 2017 at 13:34

bflemi3 · Accepted Answer · 2019-10-18 16:38:13Z

15

Since v-html isn't compiled you will have to create a mini component like this to get around the issue:

new Vue({
  el: '#app',
  data () {
    return {
      data: ``
    }
  },
  
  computed: {
    compiledData () {
      return {
      	template: `<p>${this.data}</p>`
      }
    }
  },
  
  methods: {
    replace () {
       this.data = `Now click on me <a href='#' @click.prevent='alert("yo")'> here </a>`
    }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>


<div id="app">
  <component :is="compiledData" ></component>
  <button v-on:click="replace">Click Me to replace div contents</button>
</div>

The above code compiles the string content and thus you can run/execute the function as intended

edited Oct 18, 2019 at 16:38

bflemi3

6,83021 gold badges96 silver badges160 bronze badges

answered Nov 9, 2017 at 14:00

samayo

16.5k13 gold badges95 silver badges115 bronze badges

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

2 Comments

craig_h Over a year ago

That's a neat solution.

Tim Liberty Over a year ago

amazing samayo. You are brilliant!

panicoper · Accepted Answer · 2017-11-09 14:25:38Z

Other solution using Vue components (codepen):

<script src="https://unpkg.com/vue"></script>
<div id="app">      
  <div id="someId"></div> <button v-on:click="replace">Click Me to replace div contents</button>
  <component :is="currentView"></component>
</div>

<script>
let app = new Vue({
  el: '#app',
  data: {
    currentView: null   
  },
  methods:{
    replace: function(){
      var templateFromServer = getTemplate();
       var comp=Vue.component('template-from-server', {
          template: templateFromServer,
          methods:{
            clickMe:function (){
              console.log("click");
            }            
          }
        });   
      this.currentView = comp;
    }   
  }
});

function getTemplate(){
  return "<a href v-on:click.prevent='clickMe'>Click Me</a>"
}
</script>

tony19 · Accepted Answer · 2022-07-15 04:20:25Z

0

v-html is not compiled as a Vue template. From the docs:

Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates. If you find yourself trying to compose templates using v-html, try to rethink the solution by using components instead.

see: https://v2.vuejs.org/v2/api/#v-html

edited Jul 15, 2022 at 4:20

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Nov 9, 2017 at 13:34

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

4 Comments

Tim Liberty Over a year ago

Thank you. Do you then know what would be a potential way to solve this issue?

samayo Over a year ago

You have to pass it a template

Tim Liberty Over a year ago

@samayo: I am unable to follow. Could you share the code please?

samayo Over a year ago

@TimLiberty Ok, check my answer

Shubham Patel · Accepted Answer · 2017-11-09 13:37:25Z

-1

You can not render VueJS code from a html string.

You can solve this issue by using v-if

<div>
<div v-if="data">I will be replaced once you click on button</div> 
<div v-else>Why does click me not work? It is loaded from server via ajax <a href @click.prevent='clickMe'>Click Me</a></div>
<button @click="replace">Click Me to replace div contents</button>
</div>

<script>
export default {
  data() {
    return {
      data: true
    }
  },
  methods: {
    clickMe() {
      alert("worked");
    },
    replace(){
      this.data = !this.data;
    }
  }
};

You can call normal javascript function from string but not vuejs function so onclick event would also work.

answered Nov 9, 2017 at 13:37

Shubham Patel

3,3091 gold badge26 silver badges34 bronze badges

2 Comments

Tim Liberty Over a year ago

The full string is returned from the server along with @click so this solution will not work.

Shubham Patel Over a year ago

As mention is vuejs.org/v2/api/#v-html "The contents are inserted as plain HTML - they will not be compiled as Vue templates". You need to use components and pass the server returned string as a template.

Collectives™ on Stack Overflow

Vue event handler on dynamically inserted string does not work

4 Answers 4

2 Comments

Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related