[Feature Request] Emit a 'save' event from the v-edit-dialog component.

[Aps05]

New Functionality

It will allow the developer to know when the user has finally finished his editing and will not cancel his changes in the future.

Improvements

Currently you need to create custom buttons with click events to achieve this, which renders the no-button v-edit-dialog obsolete.

Bugs or Edge Cases it Helps Avoid

The return-value.sync props gets updated 'on-change' and not 'on-save' making it impossible (with no custom buttons) to know when the user is done making changes or not. See example pen below which demonstrates the issue when using the return-value.sync alone:
https://codepen.io/anon/pen/qxadqb?editors=1010

[AlexKovynev]

+1 My simple validation now broken:( beta.4 is my stable life preserver for now.

[AlexKovynev]

Why? Without this edit dialog mostly not useful:(
Ok, i try to emulate large mode myself:(

Will be great return "open" also.

[AlexKovynev]

Folks, i was wrong. Save event does not decide anything. VEditDialog mostly proof of concept. Universal decision maybe does not exist at all.

Aim:
1.Validate input
2.Does not save if error, maybe alert some.
3.Every time use new own property ( i don't know how do that, and this is cancel "persistent" property, or maybe generate text-box from component, without any custom slot )

So only "save" does not change anything.

[nothing628]

same as here. I need a 'save' event to get data that needs updating compared to updating the entire table.

currently i use 'watch' to see the data that needs to update. Please restore the 'save' event

[shirahamax]

Hi, same as here. I resolve this by using change event in v-text-field. thank you.
https://codepen.io/shirahama-x/pen/BYPdjx

[smxsm]

Yep, same here - all my inline-editing functionality was broken after the update ... why were the events removed from the component?

[smxsm]

I would file that as a bug since it was working before and now it seems just accidentially gone, right?

[robertsLando]

I have solved by simple using @keyup.enter="updateName(props.item._id, props.item.name)" on input text field:

<v-text-field
   slot="input"
   label="Edit"
   v-model="props.item.name"
   single-line
   counter
   @keyup.enter="updateName(props.item._id, props.item.name)"
    :rules="[required]"
>
</v-text-field>

[aquintero]

@robertsLando
I don't think that works without native (@keyup.native.enter). It also might be better to use @keydown.native.enter considering the default behavior to is to hide the textbox on keydown not keyup.

[tvkit]

For the time being, here's how I'm hooking the save call in a typescript project where item.id is guaranteed to be unique:

<v-edit-dialog :ref="hookSave(item)"  other stuff>
 ...
</v-edit-dialog>

  hookSave(item: any) {
    const id = `item_${item.id}`;
    const $refs = this.$refs;
    setTimeout(() => {
      const $ref = $refs[id] as any;
      if (!$ref.oldSave) {
        $ref.oldSave = $ref.save;
      }
      $ref.save = (value: string) => {
        $ref.oldSave(value);
        this.internalSave(item);
      };
    });
    return id;
  }

I noticed the returnable mixin has the following, but I'm not sure how to capture the emitted event.

  methods: {
    save (value) {
      this.originalValue = value
      this.$emit('update:returnValue', value)
      this.isActive = false
    }
  }

[KaelWD]

@tvkit :return-value.sync="someData"