Jquery-Querybuilder does not work inside Vuejs

Asked

Viewed 82 times

2

Good morning, I’m trying to use Jquery’s Querybuilder along with Vuejs, but I’m getting the following error:

inserir a descrição da imagem aqui

Below follows the code that is giving this error:

        this.$refs.builder.queryBuilder({
        filters: [{ id: 1 }] 
    });

Previously I used Angularjs, and worked perfectly with this code:

    angular.element('#builder').queryBuilder({
        filters: [{ id: 1 }] 
    });

It also works with Jquery:

        $('#builder').queryBuilder({
        filters: [{ id: 1 }]
    });

This is the HTML code:

 <div id="builder" ref="builder"></div>

Does anyone know why it doesn’t work in Vuejs?

javascript jquery vue.js querybuilder
  • 1

    Wouldn’t it be more interesting to use a tool in Vue instead of using jQuery within a Vue project? Ex.: Vue-query-Builder.

  • 1

    Not to mention that this.$refs.builder refers to an HTML element and not to a jQuery object as you might be thinking. You could convert to a jQuery object using $(this.$refs.builder) but I don’t know if the plugin instance will be linked to the object.

  • I also thought about it, but since we have a team, the staff thought it best to continue with this Querybuilder, because the system already has other screens implemented with it, and the developers are already used to it. I just ran into this problem because we are making a migration from Angularjs to Vuejs.

  • 1

    $(this.$refs.builder).queryBuilder(...) worked?

  • Oops, it worked yes! Thank you very much! Want to insert as answer to the question?

  • I’m going to insert now.

Show 1 more comment

1 answer

2


As specified in documentation of the Vue, this.$refs contains references to HTML elements and components registered through the directive ref.

So if this.$refs.builder is a reference to an HTML element, you can "package" this element into a jQuery object using the method jQuery(elemento).

After that just use the plugin normally.

Follows the code:

$(this.$refs.builder).queryBuilder({
    filters: [{ id: 1 }]
})

Browser other questions tagged javascript jquery vue.js querybuilder

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