dabernathy89/vue-query-builder

A UI component for building complex queries with nested conditionals.

Vue Query Builder

2022-01-19 - This project is abandoned. I have not had time to work on this in a long time, and there are now actively maintained forks and alternatives. Please check out one of those!

A UI component for building complex queries with nested conditionals.

Vue Query Builder is a user interface that makes it easy for your users to create queries of any kind. It's useful if you need an interface for generating reports, filtering data, and more.

Demo and documentation

vue-query-builder's Issues

Is there a interface to overwrite the operators to like "=, !=, etc"?

Group in group

hi
First of all - tnx for nice plugin!
I have question: do you plan to have nested groups ?

vue query builder component is not rendered in the app page

The component page is not getting loaded
Is there any predefined method there to retrieved data from the component.
And pre defined method to set customized data to the component to load components accordingly

vue-query-builder TypeError: Cannot read property 'push' of undefined

a demo with vue-query-builder

• write vue-query-builder into el-drawer
• when click method of add,first time,it can be opened normally
• when i open it seond time,TypeError: Cannot read property 'push' of undefined

---

TypeError: Cannot read property 'push' of undefined
at VueComponent.addRule (VueQueryBuilder.common.js?9a97:4618)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

Bulma Example

Hey, i used this package in a project, but because we use bulma instead of bootstrap as a css framework i had to create custom layout components.

In case someone faces the same conditions i wanted to share the code Bulma Example and suggest to add this maybe as a second example to the docs.

there should be a 'does not equal' operator for strings

provide :key for v-for

Warning message from Vue:

./~/vue-loader/lib/template-compiler.js?{"id":"data-v-647a2ae3"}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/QueryBuilderGroup.vue
<component v-for="child in query.children">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

Having no initial state results in js error

The documentation says:
Provide a value to the v-model attribute to give some initial state to the query builder, and to automatically get the updated value of the query as it changes. If you don't want to provide initial state, you can just pass an empty object:

While the builder loads just fine, one can't actually add any groups or rules as it will result in an error:

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'push' of undefined
    at VueComponent.addRule (QueryBuilderGroup.umd.js?742c:4445)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)
    at VueComponent.click (QBtn.js?9c40:126)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

By the looks of it, nothing is creating the children array in the query.

Vue 1.0 branch

Can we get a branch for the old code, even if it will be stale?

Alternative, is there anyway we can get that code? I've tried going through the commits but it seems like its not there.

If it was never supported I could make a PR to 'go back' and support it if you want.

cdn version not aligned with current master version

As per title, the cdn version provided in the doc is not updated.
v-model won't work if using the cdn version.

Add support for new vue version

Hi, I'm trying to get this component to work. But it doesn't seem to work for new versions of vue.

Versions:
Vue: ^3.0.0
Vuex: ^4.0.0
Vue CLI: 4.5.9

Error:

VueQueryBuilder.common.js?9a97:4275 Uncaught (in promise) TypeError: Cannot read property '_c' of undefined

 at Proxy.render (VueQueryBuilder.common.js?9a97:4275)
 
 at renderComponentRoot (runtime-core.esm-bundler.js?5c40:846)

 at componentEffect (runtime-core.esm-bundler.js?5c40:4280)

 at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)

 at effect (reactivity.esm-bundler.js?a1e9:17)

 at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4263)

 at mountComponent (runtime-core.esm-bundler.js?5c40:4222)

 at processComponent (runtime-core.esm-bundler.js?5c40:4182)

 at patch (runtime-core.esm-bundler.js?5c40:3791)

 at mountChildren (runtime-core.esm-bundler.js?5c40:3975)

Is there any fix for this?

Feature request bootstrap 4 classes

would love to see bootstrap 4 support :)

Struggling to get started

Hi there,

This is a really nice looking project and I am wanting to use it to build a data query tool on a website. I am however struggling to even get started. Am I meant to start a vue project then install this tool inside it?

I tried this and copied over the code from your basic demo to check it was all working and npm run serve just returns a black page

plugins for exporting

Adding logic for export rules in mongodb query.

How can we modity the UI?

Hi, Good day . As far as a i know the build was installed and then imported to the project "import VueQueryBuilder from "vue-query-builder";" but i can't seem to locate where to changed it.As you can see in the screenshot, by the way I am using the sample project you put on code sandbox which is this link (https://codesandbox.io/s/r0r7jjjnko?from-embed). I just wanted to know how can we modify its interface as you can see on the screenshot. For example i wanted to changed that vegetable textfield to a select option where data comes from an API or change the button or add more to the UI. A reply would be a great help , Thank You.

Reset the Query Builder

Hi,

Is it possible to reset the query builder? I tried setting the v-model to '{}', but this doesn't update the component...

Vue-query-builder doesn't load or render rules for existing query

HI,
I have used vue-query-builder . and getting an issue for load rules for existing query .
i have added record with se of rules so query was generated and saved to data base. while trying to retrieve and display the record query bulder does not set or load the rules based on teh existing query .
Could you please help me to load exsiting rules based the query generated during add record.
thanks in Asvance

When logical operators changed - there is still "All" option selected

Hi there!

Thanks for this plugin as it is great and saved a lot of time for me by not writing the whole query builder from scratch.

Despite, I'm having some problems with it and also have suggestions.

1. Problem:
   When changing operator labels, there is still preselected 'All' value even if it is called in other way. Here I've made a cover (:)) on your sendbox, but added labels on the component. Under the query builder form you will see labels object that is used.
   https://codesandbox.io/s/q96zl47919?view=preview
   As you will see when page have just loaded - Match type selects are blank until you explicitly click on it and choose an option. Also this causes a problem as I'm expecting to get only AND or OR on the backend.

2. Suggestion:
   It would be great to have ability to add more than two operators 'All' or 'Any'. Anyway, except they are used only as select options and as an attribute in query.

3. Suggestion:
   It would be great to have operators when using select field type. It would be great to have two operators for the select type: ['=', '<>'] so there would be a possibility to choose what to exclude in query.

Refer to the jQuery QueryBuilder

Refer to the jQuery QueryBuilder

This is my code is bad
https://github.com/zhuangxiaohui/ibps-query-builder

recompile dist code

vue-template-compiler made some changes and broke the backward compatibility, third party project need to be recompiled using the latest version of vue.

more info: https://github.com/vuejs/vue/releases/tag/v2.1.7

Vue Query Builder is not loading. TypeError: Cannot read property '0' of undefined

Hi Friend,

I have the following inconvenience when using VueQueryBuilder, the following two errors occur:

1. errorLog.js: 17 TypeError: Cannot read property '0' of undefined
   at VueComponent.data (VueQueryBuilder.common.js: 5159)
   at VueComponent.mergedDataFn (vue.esm.js: 1168)
   at getData (vue.esm.js: 3417)
   at initData (vue.esm.js: 3374)
   at initState (vue.esm.js: 3311)
   at VueComponent.Vue._init (vue.esm.js: 4628)
   at new VueComponent (vue.esm.js: 4798)
   at createComponentInstanceForVnode (vue.esm.js: 4310)
   at init (vue.esm.js: 4131)
   at createComponent (vue.esm.js: 5608) "data ()"

2. TypeError: Cannot read property 'text' of undefined
   at VueQueryBuilder.common.js: 5213
   at Array.forEach ()
   at VueComponent.mergedRules (VueQueryBuilder.common.js: 5212)
   at Watcher.get (vue.esm.js: 3142)
   at Watcher.evaluate (vue.esm.js: 3249)
   at VueComponent.computedGetter [as mergedRules] (vue.esm.js: 3507)
   at VueComponent.vqbProps (VueQueryBuilder.common.js: 5227)
   at Watcher.get (vue.esm.js: 3142)
   at Watcher.evaluate (vue.esm.js: 3249)
   It was working fine, even before checking out the git repository.

What do you think?
Thank you

Date as custom component not working

How to add date as custom component? I have added it as a custom-component but it does not work it shows blank object? please guide

Translate operators to another language

is there a possibility to translate the operators to spanish, italian or another language? i've tried but is not applying

dynamic labels

Would be nice to have labels that instead of a dropdown was a text box so the user can type something in

Is Custom Template supports custom-components ?

I am working on a project which is using custom-component and it works fine without custom templates but I needed to modify the styling and layout for which I am using custom template bit all other types works accept custom-component.

https://codesandbox.io/s/vue-query-builder-demo-tailwind-forked-gvz1s

Support for date type

Please include support for HTML5 date input type

sql or no-sql output

http://querybuilder.js.org has the ability to convert the output to mongo or SQL queries, do you have any plan to add this future?

Is there a interface to receive event from Query-builder?

Is there a interface to receive event from Query-builder?

deepClone is not defined

Hey, thanks for the great library. I am running across the following error:

Uncaught ReferenceError: deepClone is not defined
    at deepClone (eval at <anonymous> (app-c97455196b.js:1519), <anonymous>:14:21)
    at VueComponent.mounted (eval at <anonymous> (app-c97455196b.js:1471), <anonymous>:125:85)
    at callHook (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:2758:19)
    at Object.insert (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:1769:5)
    at invokeInsertHook (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:4472:28)
    at Vue$3.patch [as __patch__] (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:4636:5)
    at Vue$3.Vue._update (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:2639:19)
    at Vue$3.updateComponent (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:2613:10)
    at Watcher.get (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:2936:27)
    at new Watcher (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:2928:12)

Any advice on how to fix it? Thanks

How to get the output JSON?

query validation

is there any way to validate a query? (like something "jquery query builder" dose in https://querybuilder.js.org/api/QueryBuilder.html#validate )

eg. "age == 21 && age != 21" is not a valid query

Request: Update for Bootstrap 4 support

https://getbootstrap.com/docs/4.0/migration/

Existing rendered component objects are not compatible with v4 bootstrap. EG buttons with btn-default class will render as plain white buttons since it was changed to btn-secondary in v4.

How to trigger the select box event

I want to be able to listen for the change event in the drop-down box in the condition so that I can do different things. For example, I added a new condition, a compare >= b, when switching compare to not compare, there should be no other options later. How to monitor the event of the compare select box?

Feature: Different grouping and views

First of all, this is a great package. I have been looking to make something like this for a while and this has provided an almost perfect result!

I have no idea how you would implement this, but thought I would fire over an idea.

The current implementation allows you to make any combination of groups, with and/or's in all positions. This means you can make the most complex logic you can think of and is great.

However, from user with a non-programmer wired brain, this could get quite complicated to understand and may not be required in many situations. For example, a simple rule building application.

It would be great if there was a way within the package that you could disable certain elements such as the any/all options.

Using the front app rule builder example (https://help.frontapp.com/t/182490/how-to-create-a-rule) that I think works really well to explain this. In this case, the and/or is not selectable, but the way in which you lay out blocks means that you can get a similar functionality for simple queries.

This can be done with your package by a simple fork and a a few lines of code, but this means you have then set it for the whole project. It would be great if a way to configure the allowed user interactions could be added to the package.

Additionally, one thing that does confuse me with this package is when you click the new rule or new group button, the new rule/group does not appear where you have clicked. Personally it feels much more intuitive to me when these buttons are clicked the elements appears in the same place. Again, this is just a very small edit in a fork but there is no way to do this natively within the package, which I would love to see. This point is obviously much more down to personal preference but thought I would fire it out there.

Thanks again for all your work on this. Really really loving what you have made!

Cannot catch update:query event emit

This is probably more to do with incorrect syntax/code on my side, but I cannot catch the emit event from the component.

Usually I would just do:

<my-component @emit_event="function"></my-component>

To catch the emitted event, but when I update the query and try to catch with @update:query nothing happens.

<vue-query-builder :rules="rules" :initial-query="initialQuery" @update:query="updateQuery"></vue-query-builder>

Instead I am using v-model on the query builder, which is actually working but I think the intention is to be using the event?

This may be more of a stack overflow issue, but hopefully you are able to help!

How to change the interface ? where to locate it when the builder was just imported?

Custom select component does not get choices value

Custom select component does not get choices value, so the list cannot be populated.

Typescript support

This library is a perfect fit for the current project I am working. Only downfall is it doesn’t support Typescript. Would be great if support could be added for it.

Cannot customize using Vuetify

This sandbox has a basic set up, sans styles, that works.

However, as soon as I try to use Vuetify it breaks. In this example I have the changed the group's root template from <div> to <v-card> and it yields TypeError: _vm.$parent.ruleById is not a function when I try to add a rule or group.

https://codesandbox.io/s/vuequerybuilder-vuetify-i5onh

Custom components in QueryBuilderRule this.id got undefined

I am using custom components and it all works properly.

When I debug line 68 of QueryBuilderRule:
this.$options.components[this.id] = this.rule.component;
this.id is undefined.

I am curious about this line. How does it work? Is this undefined at purpose?

Thank you.

How to remove the class - form-inline

I am stuck in a situation where my form gets messed up due to form-inline class.

I installed a plugin vue-query-builder and used it in my form. i added some input fields to my form and the form layout is not as per my requirement.

Upon looking into the console elements, i saw there is a div which has the class form-inline. Upon deleting that class, the form looks good.

I tried overwrite the form-inline function by adding custom css, still cannot get to remove the class

.form-inline {
    display: contents !important;
    flex-flow: unset !important;
    align-items: unset !important;
  }

Where we can change the JSON data structure?

Where can we change the json data structure? as for now what i have so far is the example below but what if i changed the structure like for example I have question where in question contains answers and and then answers contains products. something like that.

#the structure that i want , something like this , changing the generated json structure where can we modity that from you're builder?

[

store1: [
{
    question1: [
        {
            answer1: [
                product1,
                product2,
                product3,
            ]
        },
        {
            answer2: [
                product1,
                product2,
                product3,
            ]
        }

    ]
}]

]

#what i have so far
{
"logicalOperator": "All",
"children": [
{
"type": "query-builder-rule",
"query": {
"rule": "question",
"selectedOperator": "equals",
"selectedOperand": "Question",
"value": "What is my name?"
}
},
{
"type": "query-builder-rule",
"query": {
"rule": "answer",
"selectedOperator": "equals",
"selectedOperand": "Answer",
"value": "Test"
}
},
{
"type": "query-builder-rule",
"query": {
"rule": "multi-select-field",
"selectedOperator": "=",
"selectedOperand": "Products",
"value": [
"Red",
"Orange",
"Yellow",
"Green"
]
}
}
]
}

ReferenceError: _h is not defined

My Vue versiyon is 2.2.1

i import like this:

import builder from 'vue-query-builder';
Vue.component('vue-query-builder',builder);

and i use like this :

                <vue-query-builder
                        :rules="myRules"
                        :maxDepth="2"
                ></vue-query-builder>

how can i fix it ?

thanks.

support for in, not in operators

Hello,

Do you plan do add support for in, not in operator ?

Camel case event queryUpdated

Under some circumstances (when using in-dom templates), camelCase events don't fire - see vuejs/vue#4044

Consider changing this query-updated throughout. I can provide a PR if you want.

What can I do with the output?

Pardon for a noob question.

What can I do with the output? Let say if I have a JSON data structure. Can you show me an example of how to filter the JSON data using query builder output?

Thanks!
Haris

limit the number of (Add Rule and Add Group)

Can we able to limit the number of children to add ( ie query-builder-group and query-builder-rule)

Slots

It will be nice to have some slot to personalize a bit the main UI , some example:

• MatchType panel (add or remove some butto "Apply" or "Reset")
• AddRule / Add Group section for a better personalization
• Panel footer (as before)

text options that shouldnt allow value input

I was noticing that for field type='text' that when a user selects one of these operators 'is empty' or 'is not empty' it is still allowing them to enter a value. Should the text component not hide that portion of data entry at that point?

Q: QueryBuilderGroup rule selector blank and "selectedRule" undefined after rules changed

When I changed rules after once vue-query-builder created, all the rules of QueryBuilderGroup updated well as I assigned by program, but rule select label is remain blank and "selectedRule" is also undifine. Only after I click it, It have a value.

I hope to get idea If I want to display first rule in selector even I changed the rules dynamically .