Here is my data
data() {
return {
monday_start: '',
monday_end: '',
tuesday_start: '',
tuesday_end: '',
wednesday_start: '',
wednesday_end: '',
thursday_start: '',
thursday_end: '',
friday_start: '',
friday_end: '',
saturday_start: '',
saturday_end: '',
sunday_start: '',
sunday_end: '',
notifmsg: '',
};
},
I have a calendar system where you can set the start and end of a day like so:
<tr>
<td>Monday</td>
<td>
<base-time-picker
:input-data.sync="monday_start"
field="monday_start"
label="Monday - Start Time"
:long-time="true"
class="mb-3"
/>
</td>
<td>
<base-time-picker
:input-data.sync="monday_end"
field="monday_end"
label="Monday - End Time"
:long-time="true"
class="mb-3"
/>
</td>
<td>
<v-icon
class="ml-2"
@click="copy(monday_start,monday_end)"
>
mdi-compare
</v-icon>
<v-icon
class="ml-2"
@click="reset('monday')"
>
mdi-delete
</v-icon>
</td>
</tr>
I have created a function called copy so you can copy the day across all other days( so you don’t have to individually set each day)
copy(start,end){
this.monday_start = start;
this.tuesday_start = start;
this.wednesday_start = start;
this.thursday_start = start;
this.friday_start = start;
this.saturday_start = start;
this.sunday_start = start;
this.monday_end = end;
this.tuesday_end = end;
this.wednesday_end = end;
this.thursday_end = end;
this.friday_end = end;
this.saturday_end = end;
this.sunday_end = end;
},
Obviously, this isn’t clean and wanted to know the best way of changing all of this data?
Advertisement
Answer
Based on your stated environment, assuming no other variables have the specified keywords:
You could utilise Object.keys() on your VueJS instance and check for _start _end keywords. After building an array, just assign them your new values.
copy(copyDateStart, copyDateEnd) {
Object.keys(this).filter(key => key.includes('_start')).forEach(key => this[key] = copyDateStart);
Object.keys(this).filter(key => key.includes('_end')).forEach(key => this[key] = copyDateEnd);
}
Here is a working example over on JSFiddle (Vanilla JS to demonstrate).
References: