nested models still not working in v3-beta.7

[vesper8]

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

• I'm submitting a ...
  • [ x] bug report

• Do you want to request a feature or report a bug?
  bug

• What is the current behavior?
  v3 checklist does not work when using nested model

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
  https://github.com/vesper8/vue-form-generator-v3-checklist-test

• What is the expected behavior?
  v3 checklist should work when using nested model

• What is the motivation / use case for changing the behavior?
  make checklist usable with nested models

• Please tell us about your environment:

  • Version: [3.0.0-beta.7]
  • Browser: [Chrome 71]
  • Language: [ES6/7 | ES5]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

As mentioned by @AruXc in #515 (comment)

I'm using the latest beta (beta.7) of V3 and the checklist does not seem to support nested models.

This works:

<vue-form-generator :schema="test.schema" :model="test.model"></vue-form-generator>

      test: {
        model: {
          test: [],
        },
        schema: {
          fields: [
            {
              type: 'checklist',
              model: 'test',
              label: 'Test',
              values: [
                'apple', //
                'orange',
                'kiwi',
              ],
              fieldOptions: {
                listBox: true,
              },
              onChanged(model) {
                console.log('skills changed to', model.test);
              },
              onValidated(model, errors) {
                console.log('skills validated:', errors);
              },
            },
          ],
        },
      },

But this does not work:

      test: {
        model: {
          test: {
            test: [],
          },
        },
        schema: {
          fields: [
            {
              type: 'checklist',
              model: 'test.test',
              label: 'Test',
              values: [
                'apple', //
                'orange',
                'kiwi',
              ],
              fieldOptions: {
                listBox: true,
              },
              onChanged(model) {
                console.log('skills changed to', model.test);
              },
              onValidated(model, errors) {
                console.log('skills validated:', errors);
              },
            },
          ],
        },
      },

It gives the following error:

Uncaught TypeError: Cannot read property 'push' of undefined
    at VueComponent.onChanged (vfg.umd.min.js?06f3:1)
    at change (vfg.umd.min.js?06f3:1)
    at invoker (vue.js?ba4c:2128)
    at HTMLInputElement.fn._withTask.fn._withTask (vue.js?ba4c:1913)

@lionel-bijaoui mentioned this should be fixed in #532

But that was merged into beta.7 and that's what I'm using.. so not sure if it's something I'm doing or if it's still broken.. but it seems to not be working.. would appreciate some help! Thanks!

[zoul0813]

I just tested this against the v3 branch, and your second example appears to work just fine

I'd also like to point out that V3 is still in development and not ready for general use yet.

[vesper8]

@zoul0813 thanks for getting back

I know it's still in dev, and I'm using it in dev too, my project isn't launched yet. But I really need the new improved grouping in order to create sub-groups.

Anyway I'm very surprised you didn't see the problem. Maybe I wasn't clear.. the checklist does render properly, it's only when you open the console that you see the error, only when you actually try to check items in the checklist.

I was wondering if this might be due to some other dependencies in my project so I created a minimal repo here

https://github.com/vesper8/vue-form-generator-v3-checklist-test

And I can still reproduce the problem...

Are you checking against a V3 branch that has more commits since the tagged beta.7? If so, how can I also pull that in? I'm using

    "vue-form-generator": "git://github.com/vue-generators/vue-form-generator.git#v3"

yarn list | grep vue-form-generator shows

├─ vue-form-generator@3.0.0-beta.7

Here's a screenshot of what I see

And the minimal code
https://github.com/vesper8/vue-form-generator-v3-checklist-test/blob/master/src/main.js
https://github.com/vesper8/vue-form-generator-v3-checklist-test/blob/master/src/App.vue

[zoul0813]

I ran the example directly against the v3 branch, by adding a new dev/projects that was basically the same as your checklist-test project.

Running it directly within VFG v3 works fine ... but your example does show the issue, so it likely has something to do with the way the vfg.umd.js is being built, or referenced.

@lionel-bijaoui any thoughts?