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

Question

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

格式化的数据以 m：ss 为单位（m - 分钟，s - 秒）

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

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

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

我真的被困在这个，谢谢你的时间！

<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 v-model="input"
       id="time-input" 
       type="text"/>

然后，为了获得更干净的代码，使格式值方法

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))
    }
}

Answer 2

您可以绑定

> < li>

绑定<代码>

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

在<代码>上

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

更新＜code＞formatTime（）和＜code>$event.target。值参数。还可以使用vm$set（）使用新值对＜code＞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)
    }
  }
}

演示