mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
fixed user input event to be fired correctly, added reset event
This commit is contained in:
parent
5e9e55f00e
commit
bbbf051026
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<form
|
||||
class="ds-form"
|
||||
@submit.prevent="submit"
|
||||
novalidate="true"
|
||||
<form
|
||||
class="ds-form"
|
||||
@submit.prevent="submit"
|
||||
novalidate="true"
|
||||
autocomplete="off">
|
||||
<slot
|
||||
:errors="errors"
|
||||
:reset="reset" />
|
||||
:reset="reset"/>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
@ -61,13 +61,6 @@ export default {
|
||||
methods: {
|
||||
submit() {
|
||||
this.validate(() => {
|
||||
/**
|
||||
* Fires after user input.
|
||||
* Receives the current form data.
|
||||
*
|
||||
* @event input
|
||||
*/
|
||||
this.$emit('input', this.newData)
|
||||
/**
|
||||
* Fires on form submit.
|
||||
* Receives the current form data.
|
||||
@ -81,9 +74,9 @@ export default {
|
||||
const validator = new Schema(this.schema)
|
||||
// Prevent validator from printing to console
|
||||
// eslint-disable-next-line
|
||||
const warn = console.warn;
|
||||
const warn = console.warn
|
||||
// eslint-disable-next-line
|
||||
console.warn = () => {};
|
||||
console.warn = () => {}
|
||||
validator.validate(this.newData, errors => {
|
||||
if (errors) {
|
||||
this.errors = errors.reduce((errorObj, error) => {
|
||||
@ -95,7 +88,7 @@ export default {
|
||||
this.errors = null
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
console.warn = warn;
|
||||
console.warn = warn
|
||||
this.notify(this.newData, this.errors)
|
||||
if (!errors && cb && typeof cb === 'function') {
|
||||
cb()
|
||||
@ -121,10 +114,25 @@ export default {
|
||||
},
|
||||
async update(model, value) {
|
||||
dotProp.set(this.newData, model, value)
|
||||
this.validate()
|
||||
this.validate(() => {
|
||||
/**
|
||||
* Fires after user input.
|
||||
* Receives the current form data.
|
||||
*
|
||||
* @event input
|
||||
*/
|
||||
this.$emit('input', cloneDeep(this.newData))
|
||||
})
|
||||
},
|
||||
reset() {
|
||||
this.$emit('input', cloneDeep(this.value))
|
||||
/**
|
||||
* Fires after reset() was called.
|
||||
* Receives the current form data.
|
||||
* Reset has to be handled manually.
|
||||
*
|
||||
* @event reset
|
||||
*/
|
||||
this.$emit('reset', cloneDeep(this.value))
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@ -51,6 +51,8 @@ Use a schema to provide validation for the form inputs. Use scoped slots to get
|
||||
<ds-form
|
||||
v-model="formData"
|
||||
@submit="handleSubmit"
|
||||
@input="handleInput"
|
||||
@reset="handleReset"
|
||||
:schema="formSchema">
|
||||
<template slot-scope="{ errors, reset }">
|
||||
<ds-input
|
||||
@ -123,6 +125,12 @@ Use a schema to provide validation for the form inputs. Use scoped slots to get
|
||||
methods: {
|
||||
handleSubmit(data) {
|
||||
console.log('Submit form ...', data)
|
||||
},
|
||||
handleInput(data) {
|
||||
console.log('Input form ...', data)
|
||||
},
|
||||
handleReset(data) {
|
||||
console.log('Reset form ...', data)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user