Insert Component after rendering Vue.js

Asked

Viewed 616 times

1

Hi, I’m learning how to use Vue.js and so far I’m learning how to create Components.

However I am as a difficulty, I want to render a component after loading the page. I in my project will call ajaxs and with the json that receive, insert the components, but before, to test the rendering of them I am using this basic Jquery code:

$('#test123').html('<inventory message="Click on the Item to activate it."></inventory>');

However this component is not rendered and nothing happens to it, I saw some things on the internet, however the solutions I found rendered only one component, but I need to render several, because the json I will receive, javascript will foreach and put in div.

Thank you for your attention.

javascript html jquery vue.js vue.js-2

  • Dude, I don’t know where you’re learning from Vue, but it’s not going in a nice way no! Just using jQuery together with Vue, already demonstrates this. I don’t quite understand what you want to do, but Vue.js has in one of his main premises a NAY direct handling of the DOM, I advise you to keep learning in the official documentation on the site: https://br.vuejs.org/

  • https://answall.com/questions/254378/inserindo-componente-vue-no-dom-via-jquery

  • Hello @Leandrade, I’m using Jquery only as a test, because I’m starting to learn how to use Vue, and I know how to use components at the moment, this Jquery was just for a test. My goal is that in my project there will be kind of a little game, where you have your inventory and your items, I want to make sure that when the user click to use/activate the item, the api will return a json of the updated inventory (without the item, because it just used), only that the items are components, I did the test with jquery and saw that Vue did not render them.

1 answer

1


Vuejs has its own life cycle. https://br.vuejs.org/v2/guide/instance.html in the documentation itself it explains the methods that control this life cycle. Instead of using Jquery, Vuejs also has the reactivity for HTML code, for this you can use "v-html" instead of "v-model" or "v-bind".

  • Sorry man, but I don’t quite understand how I can solve my problem with v-html :/ could explain me better, please?

  • Unlike v-model and v-bind, these control the input or select value, for example. V-HTML will allow writing HTML code and Vuejs will write this html to be executed.

  • You can create an attribute in your Vue instance and add it as follows: "<div id="teste123" v-html="html"></div>". When the ajax call is run, you can foreach and add the html variable.

Browser other questions tagged javascript html jquery vue.js vue.js-2

You are not signed in. Login or sign up in order to post.