Vue Query Builder

# Configuration

# Props & Events

These are all of the props and events that can be defined on the Vue Query Builder component. See below for a detailed explanation of each one.

<vue-query-builder
  :rules="rules"
  :maxDepth="3"
  :labels="labels"
  v-model="query"
  ></vue-query-builder>

# rules required Type: Array

The rules prop provides all of the rules that can be selected within the UI and added to a group.

The rules prop is an array of objects. A simple set of rules might look like this:

rules = [
    {
        type: "text",
        id: "vegetable",
        label: "Vegetable",
    },
    {
        type: "radio",
        id: "fruit",
        label: "Fruit",
        choices: [
            {label: "Apple", value: "apple"},
            {label: "Banana", value: "banana"}
        ]
    },
];

Each object in the rules array can contain the following properties:

Property Possible Values Description
type String from this list: "text", "numeric", "custom", "radio", "checkbox", "select", "custom-component" required Determines the basic template for conditionals based on this rule. Each type has some basic defaults that can be overridden. You can include a custom component as long as it interacts properly with v-model (see more details in the Vue docs here).
id Any string Optional - will be included in the final query object. If not set, defaults to a sensible value. For custom components, this will be the component's HTML tag.
label Any string required Label to be displayed to the user.
operators Array of strings Optional. Override the operators for the rule type. If not defined, sensible defaults are provided.

Ex: operators: ['=','<>','<','<=','>','>=']
choices Array of objects, each with a `label` and `value` property. may be required Required for checkbox, radio, and select rule types. Defines the individual radio and checkbox inputs, or select options. Select inputs will default to the first item in the `choices` list; if you want an empty option you must provide it yourself.

Ex: choices: [{label: "Foo", value: "foo"}, {label: "Bar", value: "bar"}]
operands Array of strings or numbers Optional. Allows you to set a dropdown as the left side of the conditional. For example, you may have a rule for 'Address' that lets the user choose which kind of address the rule is referring to:

Ex: operands: ['Home Address','Work Address']
inputType String with an HTML input type Optional. Override the HTML input type for a rule type.

Ex: inputType: "email"
default Mixed Optional. Provide a default value. Currently only used for custom components.

Ex: default: 123
component An imported component may be equired Required for type custom-component.

Ex: component: RangeInput

# maxDepth optional Type: Number Default: 3

Defines the maximum depth (nested layers) of the query.

# labels optional Type: Object

Replace the default labels used in the UI. The default values are:

{
  "matchType": "Match Type",
  "matchTypes": [
    {"id": "all", "label": "All"},
    {"id": "any", "label": "Any"}
  ],
  "addRule": "Add Rule",
  "removeRule": "&times;",
  "addGroup": "Add Group",
  "removeGroup": "&times;",
  "textInputPlaceholder": "value",
}

# v-model optional Type: Object

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:

<vue-query-builder
  v-model="query"
  ></vue-query-builder>

  // Inside your Vue app / component
  data() {
    return {
      query: {},
    }
  }

← Custom Templates →