Vue v-on:click not working on Ajax content

Question

I am new in Vue, and I have component (id="apartments"), in which I am getting content from another resources/views file, the code which I have used for adding html is:

 plansHtml = '<a href="{{ $plans[0]['href'] }}" v-on:click="testfunction();"></a>';//This is the html which I am getting from Ajax, and in this html I have used v-on:click
 activePlanContainer.html(plansHtml);

And the code in my Js file is:

var appApartments = new Vue({
    el: '#apartments',
    methods: {
        testfunction: function() {
            console.log('Test function called');
        }
    }
});

Please let me know what I am doing wrong, I have also tried v-on:click-native="testfunction();" but this also didn't worked. Thanks in advance

Possible duplicate of Vue Components and AJAX loaded HTML content — Stephan-v
– Stephan-v, Commented Oct 30, 2018 at 9:53
You need to make sure your Vue code executes after you inject the Ajaxed code or it will never be parsed by Vue. — i--
– i--, Commented Oct 30, 2018 at 13:58

Kai · Accepted Answer · 2018-10-30 14:26:14Z

0

Maybe you have two question here

Nothing in your <a></a> tag from your code
If you use native javaScript or jQuery to create Dom element, vue can't listen it(this means that the syntax of vue cannot be used.)

or your can provide more code for us to solve your problem

answered Oct 30, 2018 at 14:26

Kai

111 bronze badge

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

2 Comments

user1578460 Over a year ago

May be some compliation is required after adding html?

Kai Over a year ago

You need to use vue create DOM element , maybe you can provide all code that about createit

Collectives™ on Stack Overflow

Vue v-on:click not working on Ajax content

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related