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?

Where/when are you trying to get it? From within the Vue component? When in the event lifecycle? — Las Ten
– Las Ten, Commented Aug 15, 2018 at 18:28
yes, within vue component, in "created" method. I have router, that load my component into <router-view>. When this component loaded, i need to initialize jquery plugin on element inside of component. — Сергей Викторович
– Сергей Викторович, Commented Aug 15, 2018 at 18:34

Las Ten · Accepted Answer · 2018-08-15 18:54:44Z

4

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.

answered Aug 15, 2018 at 18:54

Las Ten

1,17510 silver badges22 bronze badges

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

1 Comment

Сергей Викторович Over a year ago

Yes, i have a .vue file component. The problem was that i had v-if condition instead of i-show on my template body. And when jQuery tried to access element, v-if was rendering. But if i use v-show, element already rendered.

Сергей Викторович · Accepted Answer · 2018-08-15 18:58:53Z

1

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

edited Aug 15, 2018 at 18:58

answered Aug 15, 2018 at 18:46

Сергей Викторович

1182 silver badges7 bronze badges

1 Comment

Bertie92 Over a year ago

Second one was useful. To sum up: if you're using v-if then the dom element doesn't exist. However, v-show solves this problem.

Collectives™ on Stack Overflow

VueJS & jQuery query selector

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related