Script Editing the DOM

[fivestep]

I have a script that is added to the body, it has two jobs. The 1st: it adds new elements into the DOM. The 2nd: It finds a static element with a specific ID in the DOM and manipulate that also by giving it children elements. Using vue-head to do this in vuejs, I add the script in app.vue.

export default { head: { script: [ { type: 'text/javascript', src: '//cdn.cookielaw.org/consent/f5cc0259-ebf9-460e-b628-c1d661e5d3b6.js', body: true, async: true, }, ], }, };

It does the first part of it's job just fine, the new elements appear. But it is not adding new children elements into the element with a specific ID. This element with a specified ID is part of the template in another component within the app (Footer.vue). Once in a blue moon it does work when you load the page. Perhaps there is a life-cycle issue here? Am I missing some other configuration? Thanks

[fivestep]

Ok I did some further testing, further confusing me.

I moved the element with the specific ID from the Footer.vue component into the template of App.vue It seems to work every time you refresh the page. Progress!

I then moved the element with the ID back to footer.vue, and also moved the vue-head script into the footer.vue and it does not want to work here.

Ideas?

[fivestep]

Alright, I figured it out. The footer component has to wait for the wordpress API to load. The expected behavior for the element with the ID works if I make the component load right away without waiting for the wordpress API. Perhaps there is a way to have the vue-head script load after the API is ready? Thanks.

[ktquez]

Sorry for not responding earlier, you can use $emit('updateHead') for the Vue-head to update the tags. https://github.com/ktquez/vue-head#update-elements-with-asynchronous-data-or-after-page-loaded