I need to store formatted data from multiple text boxes in an array. Each textbox should display and save the value in m:ss format (m - minute, s - seconds).
Currently, all textboxes show the same value because there is only one this.formatTime variable.
How can I modify this so that v-model iterates through the array and saves the formatted values into an array?
The textbox should display the formatted value and save it in allFormatValues[].
I'm struggling with this issue, appreciate your assistance!
<div id="app">
<div
v-for="(input, index) in valueInputs"
:key="index"
>
<input
v-model="formatTime" //wish to use allFormatValues[index] instead
id="time-input" //but lose formatting if changed to above
type="text"
/>
</div>
</div>
And
watch: {
formatTime () {
const totalLength = this.formatTime.length;
let a = this.formatTime.replace(/[^0-9]/g, "")
.substr(0, 1);
const b = this.formatTime.replace(/[^0-5]/g, "")
.substr(1, 1);
const c = this.formatTime.replace(/[^0-9]/g, "")
.substr(2, 1);
if (totalLength >= 2) {
a = `${a.substring(0, 1)}:${b}${c}`;
}
this.formatTime = a;
},
}
I have an array where I want to browse and assign this value
data () {
return {
valueInputs: [], // a list of inputs
allFormatValues: [] // intend to keep all the formatted values here by their respective indexes
}
}