2

Bom dia, estou tentando utilizar o QueryBuilder do JQuery junto com o VueJs, porém estou obtendo o seguinte erro:

inserir a descrição da imagem aqui

Abaixo segue o código que esta dando este erro:

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

Anteriormente eu utilizava AngularJs, e funcionava perfeitamente com este código:

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

E também funciona com JQuery:

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

O código HTML é esse:

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

Alguém sabe o por que de não funcionar no VueJs?

6
  • 1
    Não seria mais interessante usar uma ferramenta em Vue ao invés de usar jQuery dentro de um projeto Vue? Ex.: vue-query-builder. Commented 14/01/2019 às 13:32
  • 1
    Sem contar que this.$refs.builder se refere a um elemento HTML e não a um objeto jQuery como você pode estar pensando. Você poderia converter para um objeto jQuery usando $(this.$refs.builder) mas não sei se a instância do plugin vai estar vinculada ao objeto. Commented 14/01/2019 às 13:33
  • Também pensei nisso, mas como temos uma equipe, o pessoal achou melhor continuar com este QueryBuilder, até porque o sistema já conta com outras telas implementadas com ele, e os desenvolvedores já estão acostumados com ele. Apenas esbarrei nesse problema pois estamos fazendo uma migração de AngularJs para VueJs.
    – Brayan
    Commented 14/01/2019 às 13:39
  • 1
    $(this.$refs.builder).queryBuilder(...) funcionou? Commented 14/01/2019 às 13:40
  • Opa, funcionou sim! Muito obrigado! Quer inserir como resposta da pergunta?
    – Brayan
    Commented 14/01/2019 às 13:42

1 Resposta 1

2

Como especificado na documentação do Vue, this.$refs contém referências aos elementos HTML e componentes registrados através da diretiva ref.

Então se this.$refs.builder é uma referência a um elemento HTML, você pode "empacotar" este elemento em um objeto jQuery usando o método jQuery(elemento).

Após isso basta usar o plugin normalmente.

Segue o código:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .