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".

I am using v-for to traverse the data and then v-html to print the html — Amarjit Singh
– Amarjit Singh, Commented Jan 8, 2019 at 11:01
read here, v-html only add html not compile.stackoverflow.com/a/45494778/4921471 — Álvaro Touzón
– Álvaro Touzón, Commented Jan 8, 2019 at 11:10

Boussadjra Brahim · Accepted Answer · 2019-01-08 11:37:22Z

4

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.

answered Jan 8, 2019 at 11:37

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Comments

Amarjit Singh · Accepted Answer · 2019-06-11 08:02:48Z

0

Instead of loading html I end up saving component in JSON format. This component has a template property that stores the html string. In this way I am able to store and load component to and from database and it works without any issue.

answered Jun 11, 2019 at 8:02

Amarjit Singh

2,1541 gold badge25 silver badges55 bronze badges

Collectives™ on Stack Overflow

Vue.js print raw html and call component methods

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related