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

[kunchamreddy]

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

[dabernathy89]

Can you set up a demo on CodeSandBox (or, if not possible, just include some code here) showing how you're trying to do it?

[kunchamreddy]

i have followed the below steps 1) npm install vue-query-builder

2) import VueQueryBuilder from 'vue-query-builder'; 3) Added as component VueQueryBuilder 4) i have used like below

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

During add record my query was build like below , i have selected one rule externalId equals 999

{ "logicalOperator": "All", "children": [ { "type": "query-builder-rule", "query": { "rule": "externalId", "selectedOperator": "equals", "selectedOperand": "externalId", "value": "999" } } ] }

query was saved successfully in data base

while display record am assigning the above query to criteriaQuery data property .

while trying to display detail record rules are not loaded properly as per the query

[kunchamreddy]

HI dabernathy89 , Do you have any idea or could you please suggest me on how we can make render the query builder based on query . Thanks in Advance,

[dabernathy89]

@kunchamreddy I will do my best to take a look at this this week.

[kunchamreddy]

HI dabernathy, Another update regarding Vue-query-builder reload issue The issue is that the v-model query data property does not work re actively, i have followed the below steps to re produce this issue 1) initially v-model="query" data proeprty is empty query={};

date{
return{
query :{}

}

2) i have one button and when i click that button one function will get called and will asign generated query to query data model

setQuery()
{
  this.query = {
        logicalOperator: "All",
        children: [
          {
            type: "query-builder-rule",
            query: {
              rule: "percentage",
              selectedOperator: "=",
              selectedOperand: "Percentage",
              value: 50
            }
          }
        ]
      };
}

after clicking on button query model will update but vue-buery builder is not updated properly i mean nothing is diplayed on the rules below is code sandbox link to reproduce the same https://codesandbox.io/s/llq3430lj9

[dabernathy89]

Pushed a fix for this today! Thank you for finding the issue.