Vue.js:使用computed属性的输入格式在快速键入时不适用

Question

我正在尝试以这种格式m:ss格式化数据，并将输入文本框限制为仅显示3个或更少的字符。(m=分钟，s=秒(

我有下面的代码，它以m:ss格式正确格式化。但如果我一次键入多个字符，它会显示超过3个字符，否则就会卡住。

I.E(如果我一次输入11111，我得到1:1111。但我希望文本框显示1:11。

如果我键入1234，有时它会停留在1:2。然后，如果我等待并再次键入，则有超过3个字符。

new Vue({
el:"#app",
data () { return { value: "" } },
computed: {
fValue: {
// getter
get () {
if (this.value.length > 3) { return this.value.substr(0, 3); }
return this.value;
},
// setter
set (newValue) {
this.formatTime(newValue);
}
}
},
methods: {
formatTime (str) {
let totalLength = str.length;
if (totalLength > 3) { totalLength = 3; }
let a = str.replace(/[^0-9]/g, "").substr(0, 1);
let b = str.replace(/[^0-9]/g, "").substr(1, 1);
if (b > 5) { b = 5; }
const c = str.replace(/[^0-9]/g, "").substr(2, 1);
if (totalLength >= 2) { a = `${a.substring(0, 1)}:${b}${c}`; }
const result = a;
this.value = result;
return result;
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input
v-model="fValue"
id="format-value"
class="input"
type="text"
/>
</div>

------编辑问题2-

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div
v-for="(index) in valueInputs" <-- index
:key="index"
>
<input
v-model="value"     // <-- I want to track what index I'm in
@input="formatTime" // <-- so I can set it in an array later
maxLength="4"       // I tried formatTime[index] or value[index]
id="format-value"
class="input"
type="text"
/>
</div>
</div>

data () {
return {
valueInputs: [],    // a list of inputs
allFormatValues: [] // want to store all the formatted values here by the index
}
}

想要设置一个数组来存储所有格式化的值：

this.allFormatValues[index] = this.value;

我不知道如何将索引与格式化的字符串值相关联？

Answer 1

您可以使用value作为v-model，并在input上调用formatTime。这里有一个带有一些重构/改进的演示：

new Vue({
el:"#app",
data () { return { value: "" } },
methods: {
formatTime () {
const numericValue = this.value.replace(/[^0-9]/g, "");
let [a = '', b = '', c = ''] = numericValue.substr(0, 3).split('');
b = b > 5 ? 5 : b;
this.value = numericValue.length >= 2 ? `${a}:${b}${c}` : a;
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input
v-model="value"
@input="formatTime"
maxLength="4"
id="format-value"
class="input"
type="text"
/>
</div>