How to Prevent Duplicate on the Same Group in Vue Query Builder?

To prevent users from adding two conditions on the same field within a group in a Vue 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

Conclusion

I hope you enjoyed learning about how to prevent duplicate on the same group in Vue Query Builder.

You can refer to our Vue Query Builder feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page.

If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!