Just wondering if anyone else has tried using vue's v-model with a method instead of computed. I stumbled upon this thread: How to bind a v-model with a method in Vue.js which seems to suggest it's not directly possible, but there might be a workaround. I'm currently working with bootstrap vue's datepicker, but I believe the concept can be applied universally.
In my scenario, I have two datepickers:
<b-form-datepicker id="end-datepicker" v-model="formatISO8601Start" class="mb-2 border-0" hide-header></b-form-datepicker>
<b-form-datepicker id="end-datepicker" v-model="formatISO8601End" class="mb-2 border-0" hide-header></b-form-datepicker>
If I had only one date picker, I would probably opt for a computed approach like below:
formatISO8601: {
get: function() {
return .....
},
set: function(dateSegment) {
....
....
}
},
The dilemma arises when dealing with multiple datepickers sharing the same computed property. Creating individual computed properties for each picker seems redundant and goes against best practices due to code duplication.
My idea is to try using methods instead, by replacing the regular
v-model="formatISO8601":value="getISO8601Time('start')" @input="setISO8601Time(????)"
This way, I can dynamically handle the logic based on the parameter passed:
<b-form-datepicker id="end-datepicker" :value="getISO8601Time('start')" @input="setISO8601Time(????)" class="mb-2 border-0" hide-header></b-form-datepicker>
<b-form-datepicker id="end-datepicker" :value="getISO8601Time('end')" @input="setISO8601Time(????)" class="mb-2 border-0" hide-header></b-form-datepicker>
getISO8601Time(time) {
return ......
}
setISO8601Time(????) {
....
....
}
However, I'm facing some confusion here. Specifically, the placeholder ???? where the selected date should be captured. In computed properties, the parameter dateSegment in the set function automatically holds the selected date, but this behavior doesn't seem to apply in methods. How can I retrieve the selected date in this context?