VueJS & jQuery query selector

Question

I am trying to get DOM element inside of .vue component, but i can`t bacause, as i think, the element have not rendered yet.

If i do something like this, it works:

setTimeout(() => {
    $('.element').do_something();
}, 100);

But this is bad way.

I also tried to do something like this:

// app.js
var app = new Vue({
    el: '#root',
    methods: {
        getElement(selector, cb()){
            var el = $(selector)                
            if(el.length){
                // I SEE THIS ELEMENT HERE
                cb(el);
            }else{
                setTimeout(() => {
                    this.getElement(selector);
                }, 10);
            }
        };
    }
});



// ExampleComponent.vue
export default {
    created() {
        var el = app.getElement('.selector');
        console.log(el);
    }
}

But i got an error here:

Uncaught TypeError: cb is not a function

I also tried to use Promise instead of simple callback.

// app.js
var app = new Vue({
    el: '#root',
    methods: {
        getElement(selector, cb()){
            var el = $(selector);
            if(el.length){
                return new Promise((resolve) => {
                    // I SEE THIS ELEMENT HERE
                    console.log(el);

                    resolve(el);
                });
            }else{
                setTimeout(() => {
                    this.getElement(selector);
                }, 10);
            }
        };
    }
});



// ExampleComponent.vue
export default {
    created() {
        app.getElement('.selector').then((el) => {
            console.log(el)
        });
    }
}

But getElement return undefined and i have an error:

Uncaught (in promise) TypeError: Cannot read property 'then' of undefined

Any suggestions how i can access element?

Answer 1

In the root Vue instance the components and the HTML elements within them are not directly available and you do not have a chance to control your code to run after the components were properly created. I think that's a dead-end street. The other thing you mentioned is correct on high level. However your code doesn't seem right. The export default created() { bit is what bugging me.

Suppose you have a .vue file. Then it should look something like this:

<template>
  <!-- using refs is an easier way of getting elements -->
  <div ref="theElementYouWant"> ... </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data () {
    return {
      myvar: 0
    }
  },
  methods: { /* your methods here */ },
  created () {
    // using refs is an easier way of getting elements
    const e = this.$refs.theElementYouWant
    console.log(e)
  }
}
</script>

In case you really need jQuery you can import that as the first thing in the script part (import JQuery from 'jquery') but you really don't need it for finding an element.

Answer 2

I found a solution.

Details: https://forum.vuejs.org/t/jquery-plugins-not-initialised-in-vuejs-when-loading-a-page-using-vue-router/16573

https://forum.vuejs.org/t/solved-this-refs-return-empty-object/33227