Vue component method not being run on event in dynamic HTML

Question

I am attempting to dynamically create some HTML content and bind a Vue component method to an event on the element. However this does not work. Below is a description of the problem and a snippet with a test case.

Steps to reproduce problem

Click Click me 1
Observe the console.
Click Toggle popover for tooltip.
Click Click me 2
Observe the console.

Expected behaviour

In Step 2 you should see "you should see this in the console" in the console. In Step 5 you should see "you should see this in the console" again.

Actual behaviour

In Step 2, "you should see this in the console" appears in the console. In Step 5, "you should see this in the console" does not appear in the console.

new Vue({
  el: '#app',

  methods: {
    expectToSucceed() {
      console.log('you should see this in the console');
    },
  },

  created() {
    $(document).ready(() => {
      const mockedDynamicHtml = `
        <div class="popover">
          <h1>Example tooltip</h1>
          <button @click="expectToSucceed" class="remove">Click me 2</button>
        </div>
      `;

      $('[data-toggle="popover"]').popover({
        html: true,
        template: mockedDynamicHtml,
      });
    });
  },
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <title></title>
  </head>
  <body>

    <div id="app">
      <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover for tooltip</a>
      <br><br>
      <p><span @click="expectToSucceed">Click me 1</span></p>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </body>
</html>

Where is this 'somewhere dynamically'? Please, show the whole code, because it matters. — Estus Flask
– Estus Flask, Commented Mar 13, 2017 at 11:55
I have more experience with Angular than with Vue, but this design problem is widely known in Angular realm and basically falls into 'don't use jQuery with ...' category. There's no way to bind it like that, and the question is XY problem. If you're interested in a solution that is idiomatic to Vue, I would suggest to ask a new question that addresses the problem directly. It will probably require to have 2 components instead of one. — Estus Flask
– Estus Flask, Commented Mar 13, 2017 at 16:17
You are right.I will try with 2 components and i hope it will work.thanks @estus — Arif Hussain
– Arif Hussain, Commented Mar 13, 2017 at 16:22

tony19 · Accepted Answer · 2022-07-16 02:05:18Z

1

It will be @click, like this:

<i @click="test"></i>

as shorthand of v-on is @ not :.

edited Jul 16, 2022 at 2:05

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 13, 2017 at 10:40

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

8 Comments

Arif Hussain Over a year ago

Thanks for correction it was my mistake : instead of @ but problem is same.It's working with @ also.

Arif Hussain Over a year ago

Kindly read my reply on your answer.It's not working as well.

Arif Hussain Over a year ago

I am using this click event inside ES6 template string.

Saurabh Over a year ago

@TheUnknown How are you appending htmlCotent string, can you add that in a fiddle.

Arif Hussain Over a year ago

Ya sure i will make fiddle that would be more easy to understand.

|

Collectives™ on Stack Overflow

Vue component method not being run on event in dynamic HTML

Steps to reproduce problem

Expected behaviour

Actual behaviour

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Steps to reproduce problem

Expected behaviour

Actual behaviour

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related