Me imagino que estás usando el datepicker de element-ui
Lo que yo haría es:
- Definir las propiedades
date_start
y date_end
como computed
- Al cambiar sus valores, en el
setter
ejecutar ifSameDay
como método, no como propiedad computed
.
- En el setter de
date_start
y date_end
fijas el valor de this.form.dates[0]
y this.form.dates[1]
, puesto que definir propiedades anidadas como computed es un problema. El getter de esas dos propiedades, a su vez, devuelve los valores de this.form.dates
.
- Al ejecutar
ifSameDay
, si se cumple la condición, fijar this.form.date_reincorporation
a la fecha que quieres, y fijar una propiedad this.reincorporation_readonly
como true
para bloquear el input.
- Si no se cumple la condición, limpiar
this.form.date_reincorporation
y definir this.reincorporation_readonly
como false
.
El input de la fecha de reincorporación quedaría:
Y te ahorras envolver el parent en un v-if.
Si tu componente hoy tiene la estructura (voy a simplificar mucho)
{
name: 'Licencias',
data() {
return {
form: {
dates: [new Date(), new Date()],
date_reincorporation: new Date()
}
}
},
methods: {
ifSameDay() {
const date_start = moment(this.form.dates[0]).format('DD/MM/YYYY');
const date_end = moment(this.form.dates[1]).format('DD/MM/YYYY');
return (date_start === date_end && date_start !== 'Invalid date') ? true : false;
},
}
};
Con mi sugerencia quedaría:
{
name: 'Licencias',
data() {
return {
reincorporation_readonly: false,
form: {
dates: [new Date(), new Date()],
date_reincorporation: new Date()
}
}
},
computed: {
date_start: {
get() {
return this.form.dates[0];
},
set(date_start) {
this.form.dates[0] = date_start;
this.ifSameDay();
},
},
date_end: {
get() {
return this.form.dates[1];
},
set(date_start) {
this.form.dates[1] = date_end;
this.ifSameDay();
},
},
},
methods: {
ifSameDay() {
const date_start = moment(this.form.dates[0]).format('DD/MM/YYYY');
const date_end = moment(this.form.dates[1]).format('DD/MM/YYYY');
if (date_start === date_end && date_start !== 'Invalid date') {
this.form.date_reincorporation = date_end;
this.reincorporation_readonly = true;
}
},
}
};
En otras palabras, el v-model
de la fecha inicio y fecha fin apunta a date_start
y date_end
, las cuales modifican indirectamente this.form.dates
. La gracia es que al ponerle getters y setters puedes gatillar el efecto colateral de comprobar ifSameDay
en el cual fijas la fecha de reincorporación y dejas el input como readonly. En este caso, no hay un v-if
en el el-form-item
.
Este es sólo un posible enfoque. También podrías añadir un watcher a las propiedades, pero eso me parece más sucio.
Finalmente, también podrías forzar la fecha de reincorporación al hacer submit sin tocar el resto de tu código, pero tendrías que hacer dos comprobaciones:
submitForm() {
this.form.date_reincorporation = this.ifSameDay? this.form.date[1] : this.form.date_reincorporation;
this.form.date_reincorporation = this.form.date_reincorporation? moment(this.form.date_reincorporation).format('YYYY-MM-DD HH:mm') : null;
}
date_end
ifSameDay
. Luego, sacas el input pero la propiedad nunca la fijaste. Me gusta más la idea de tratarifSameDay
como un método que se ejecuta cuando cambian los dos primeros input.