Having no initial state results in js error

[krispern]

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.

[jhull]

Having the same issue, having recently upgraded and moved to using scoped slots for my own templates...same exact code is now producing the above.

[krispern]

Seeing as this code hasn't been updated since January, I went ahead and made the fix in my fork of his code.

[dabernathy89]

@krispern I must have missed the pull request 😉

[dabernathy89]

Sorry for dropping the ball on this - between pandemic stuff and having our second kiddo in April, I haven't had time to work on the query builder at all. I'll see if I can take a closer look today, looks like it won't be a difficult fix.

[krispern]

What doesn't exist, can't be missed. 😉

I had some problems using it through my fork - something to do with the documentation if I remember correctly, so I didn't want to do a pr that might mess up yours. I ended up stripping the fork of everything it didn't need and used it on our local repo.

Anyway. There was only one small change. If you take a look at the QueryBuilderRule.vue-s beforeMount method, you'll easily see the change that solves this problem.

Thanks for coming back to your project :)

[jhull]

I just came back to say, all I had to do was add this:

  data() {
    return {
      query: { 
    children: []
      }
   }
}

to my top component (the one that calls vue-query-builder).

BTW love the Template option, great work 🥇

[dabernathy89]

@jhull thanks!

I'm actually having trouble reproducing the original issue. When I pass null or an empty object through v-model, I am not seeing any console errors or other issues here:

https://codesandbox.io/s/vue-query-builder-demo-custom-component-jp3qe?file=/src/App.vue

[krispern]

The original issue for me came about by having a custom component for a rule, with a default value as an object, e.g.

rules: [
        {
            type: 'custom-component',
            component: MyCustomComponent,
            id: 'customId',
            operators: [], // SECONDARY PROBLEM - the query builder errors for custom components without an `operators` array
            default: { // MAIN PROBLEM - this is not actually used for custom components
                operator: '',
                list: {}
            }
        }
    ]

Then after that custom component has been loaded it results in an error when you try to add a new rule with it. Make sure you're using the operator/list in the html, e.g. v-model=value.operator - since value === null, it will fail