Vue中如何将格式化数据存储在数组中，watch和v-model不保存格式化数据？

Question

我有多个文本框，当用户在不同的文本框中键入时，我想要一个数组来存储所有这些格式化数据。

格式化数据的单位是 m:ss (m - 分钟, s - 秒)

现在，所有不同的文本框都显示相同的值，因为只有一个 this.formatTime。

我们如何改变这一点，以便 v-model 遍历数组，并将其添加到格式化值数组中？

文本框应显示格式化值并将其存储在 allFormatValues[] 中。

我真的很困惑，谢谢你的时间！

<div id="app">
   <div
      v-for="(input, index) in valueInputs"
      :key="index"
    >
     <input
         v-model="formatTime" //want to use allFormatValues[index], instead
         id="time-input"      //but this loses the formatting if I change to 
                              //above
         type="text"
     />
  </div>
</div>

和

 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;
    },
}

我有一个数组我想循环并设置这个值

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

Answer 1

您可以将<input> 的值绑定到迭代器，并添加一个调用formatTime() 的input-event 处理程序来更新valueInputs：

1. 将<input>.value 绑定到input 变量：

   <input :value="input" ...>
   

2. 在<input> 上，添加一个input-event 处理程序，用于接收迭代器索引和事件值：

   <input @input="formatTime(index, $event.target.value)" ...>
   

3. 更新formatTime() 方法以接收index 和$event.target.value 参数。还可以使用 vm.$set() 以响应式更新 valueInputs[index] 为新值：

   export default {
     methods: {
       formatTime(index, input) {
         const totalLength = input.length;
         let a = input.replace(/[^0-9]/g, "").substr(0, 1);
   
         //...
   
         this.$set(this.valueInputs, index, a)
       }
     }
   }
   

demo

Answer 2

更好的解决方案是使用计算属性。

首先，让你的输入改变原始值。

<input v-model="input"
       id="time-input" 
       type="text"/>

然后，为了更简洁的代码，制作formatValue 方法

methods: {
    formatValue(value) {
        const totalLength = value.length
        let a = value.replace(/[^0-9]/g, "")
            .substr(0, 1)

        const b = value.replace(/[^0-5]/g, "")
            .substr(1, 1)

        const c = value.replace(/[^0-9]/g, "")
            .substr(2, 1)
        if (totalLength >= 2) {
            a = `${a.substring(0, 1)}:${b}${c}`
        }

        return a
    },
}

最后创建计算属性

computed: {
    formattedValues() {
        return this.valueInputs.map(value => this.formatValue(value))
    }
}