CODEWITHSUNDEEP
javascriptarraysvue.jsvuejs2format
Suzy
Suzy

Reputation: 261

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

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="(input, 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" // but that doesn't work, how to pass index 
        class="input" // into formatTime or value fields?
        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?

Upvotes: 2

Views: 473

Answers (1)

Liro Dasmaz
Liro Dasmaz

Reputation: 423

You are retrieving the values of valueInputs array not its indexs. However, you can get the index of each value in v-for as follows:

v-for="(value, index) in valueInputs"

Upvotes: 1

Related Questions