Preventing Duplicate Conditions on the Same group in VUE Query Builder

To prevent users from adding two conditions on the same field within a group in a Query Builder, you can utilize the created and change events of the Query Builder. Specifically, you can bind the beforeOpen event for the field DropdownList component. This allows you to dynamically show or hide field list items based on the current selection of Query Builder rules.

Implementation Steps

1. Bind Events: Use the created and change events to bind the necessary event handlers.
2. Modify Dropdown Behavior: In the beforeOpen event, check the currently selected rules and hide any fields that already have conditions applied.

Here is a sample code snippet demonstrating how to implement this functionality:

<ejs-querybuilder id="querybuilder" :dataSource="dataSource" ref="querybuilder" width="100%" :created="onQrybldrCreated" :change="onChange">
    ...
</ejs-querybuilder>

methods: {
    onQrybldrCreated: function () {
        this.bindEvent();
    },

    onChange: function (args) {
        if (args.type !== 'deleteRule') this.bindEvent();
    },

    bindEvent: function() {
        const ddlColl = document.querySelectorAll('.e-rule-filter .e-dropdownlist');

        for (let i = 0; i < ddlColl.length; i++) {
            const ddl = getComponent(ddlColl[i], 'dropdownlist');
            if (ddl) ddl.open = this.beforeOpen.bind(this);
        }
    },

    beforeOpen: function(args) {
        const qryBldrObj = this.$refs.querybuilder.ej2Instances;
        const selectedRules = qryBldrObj.getGroup(args.event.target);
        const elementsArr = args.popup.element.querySelectorAll('ul li');

        elementsArr.forEach((obj) => {
            const fieldName = obj.getAttribute('data-value');
            if (selectedRules.rules.find((rule) => rule.field === fieldName)) {
                obj.classList.add('e-list-hide'); 
                obj.style.pointerEvents = 'none';
            } else {
                obj.classList.remove('e-list-hide');
                obj.style.pointerEvents = 'auto';
            }
        });
    }
}

Sample link: https://stackblitz.com/edit/uva5ui62?file=src%2FApp.vue