Change event not emit in group about vuetify-form-base HOT 4 CLOSED

Thanks for the feedback!

It is a bug in the 'Group' because the emited events in recursive component are not forwarded to parent component when using v-cards as a wrapper for grouping controls. The solution will be to provide for 'group' type instead a wrapping .

I am working on...

from vuetify-form-base.

Hi @wotamann for now im using watch with deep: true property - its just workaround for me.

Thanks for answer and your work.

from vuetify-form-base.

Should work now, the attributes of v-card are not available anymore and the properties of the group must be defined via CSS.

CHANGE:

After the omission of v-card the type was changed to { type: 'group' } for better understanding

myValue: { 
  card1:{ name:'Harari', read:false, book:'C' },
}
mySchema: {
  card1: { type:'group', title:'Base', flex:5, class:'ma-2 pa-2 display-2 elevation-4 blue--text blue', 
       schema: {
            name: { type: 'text', color: 'blue',  label:'Name'},    
            read: { type: 'checkbox', label: 'Ok', color: 'blue' },
            book: { type: 'text', color: 'blue' },    
        }
    }
}

from vuetify-form-base.

Hello!

I am having the same issue with fields of type: array (fields inside of a given array item don't open/trigger, e.g. select fields)

I am watching change events

<v-form-base
    class="with-vertical-scroll"
    :schema="schema"
    :model="model"
    @change="clickHandler"
  ></v-form-base>

And my schema:

const schema = ref({
      properties: {
        type: "array",
        schema: {
          property: {
            type: "select",
            label: "Type",
            itemText: "name",
            returnObject: true,
            items: $store.getters["types/list"],
          },
          name: {
            type: "text",
            label: "Name",
          },
          buttonRemoveProperty: {
            ...btnSchema,
            label: "Remove",
          }
}
},
buttonAddProperty: {
        ...btnSchema,
        label: "Add",
      },
});

const schema = ref({
     properties: {
        type: "array",
        schema: {
          type: {
            ...selectSchema,
            label: "Property",
            items: ["prop1", "prop2"],
          },
          buttonRemoveProperty: {
            ...btnSchema,
            label: "Remove",
          },
        },
      },
      buttonAddProperty: {
        ...btnSchema,
        label: "Add",
      },
 });

// function to handle change events
function clickHandler(event) {
      console.log(event);
      if (event.key === "buttonAddProperty") {
        model.value.properties.push(defaultProperty);
      } else if (event.key === "buttonRemoveProperty") {
        const [index] = event.index;
        model.value.properties.splice(index, 1);
      }
      console.log(model.value);
    }
}

So basically, 2 things happen (either or):

1. With @change="clickHandler", the property select dropdown does not open on click. Not only selects, but any field won't work e.g. text-inputs won't be "focusable" to start typing. But clicking the buttons does add/remove items, so the change fires correctly.
2. If I remove the @change="clickHandler", then the property select dropdown opens on click, but obviously no add/remove of array items is handled.

So basically the array type is somehow conflicting with the fields inside each of its array items.

P.S. Strangely enough, scenario 1. starts working after hot-module-reloading (so when dev server serves a change I made in the code), but if I do a full page refresh, the issue returns.

Any help is greatly appreciated!

from vuetify-form-base.