Way to provide a unique ID for each input form generated by v-for in VueJS

Question

I'm trying to generate an input form for numbers (passed via props) and store the user input in the inputValues ​​array. My code is as follows:

<template>
<div v-for="n in number" v-bind:key="n">
        <input ref= "inputs" v-bind:id="'str' n" :v-model="inputValues[n]" />
        
      </div>
</template>

export default defineComponent({
  name: 'name',
  props: [
      'number',
    ],
  data() {
    return {
      inputValues: []
    }
  }
  });

But nothing is stored in inputValues. What did i do wrong? Also, how do I give the input field a different id so that I can style it differently in CSS later?

Edit: I managed to get it working!

<code><div v-for="(n,i) in number" v-bind:key="n"> ;
        <input ref= "inputs" :id="'str' n" v-model="inputValues[i]" />
        
</div></code>

Answer 1

I managed to make it work. v-bind: or ":" should not be used with v-model. I added the index because n starts at 1 instead of 0.

<div v-for="(n,i) in number"  v-bind:key="n">
        <input ref= "inputs" :id="'str' + n" v-model="inputValues[i]" />
        
</div>