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

Question

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?

Liro Dasmaz · Accepted Answer · 2021-05-17 00:45:57Z

1

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"

edited May 17, 2021 at 0:45

answered May 17, 2021 at 0:39

Liro Dasmaz

4332 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Suzy Over a year ago

Ah I simplified the code, but yes I already v-for="(value, index) in valueInputs" in the code. But the problem is I can't pass the index into the input tag v-model="value" or @input="formatTime"

Liro Dasmaz Over a year ago

You can pass it as a parameter to formatTime function. @input="formatTime(index)" or @input="formatTime(value, index)" if you need both in you function. Just make sure to change formatTime code accordingly though.

Suzy Over a year ago

Thanks, the code in the link actually didn't work in my case. Sorry I think I wasn't clear. I have to use watches for it to work from the below link, so I do't know how to add indexes here stackoverflow.com/questions/67551738/…

Liro Dasmaz Over a year ago

Will valueInputs array be filled in by users?

Suzy Over a year ago

Yes, a user will be able to add more days and its stored there

|

Collectives™ on Stack Overflow

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

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related