How to store formatted input text into an array with indexes in Vue?

  arrays, format, javascript, vue.js, vuejs2

This is an extension from this question Vue.js: Input formatting using computed property is not applying when typing quick

I am stuck on how to get a list of formatted values from my text input into an array list.
I need to do this in a matrix, but simplified it into an array.

Please help, thank you!

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

Want to set an array that stores all the formatted values:

   this.allFormatValues[index] = this.value;

I’m not sure how to associate the index with the formatted string value?

Source: Ask Javascript Questions

LEAVE A COMMENT