javascript - Vue.js print raw html and call component methods

Question

I am dynamically loading the html content from an ajax request. This html has some buttons like

<button @click="someComponentMethod">Add</button>

As you can see I am trying to call components methods. But Its not working.

I think instead of @click html's default attribute "onclick" should work. But this will only recognize the function that are defined in global scope. Can someone guide me how I can call component's function from core javascript i.e using "onclick".

Update

Ok! I got it that v-html will not compile that html. But can you guys tell me how can I call component method from javascript (i.e outside of component scope). In this way I will be able to use onclick="JAVASCRIPT_CODE_TO_EXECUTE_METHOD".

Answer 1

That content will not be compiled as mentioned in official docs :

The contents of the span will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.