Cara untuk memberikan ID unik untuk setiap borang input yang dijana oleh v-for dalam VueJS

Question

Saya cuba menjana borang input untuk nombor (dilalui melalui prop) dan menyimpan input pengguna dalam array inputValues. Kod saya adalah seperti berikut:

<template>
<div v-for="n dalam nombor" v-bind:key="n">
        <input ref= "input"v-bind:id="'str' + n"
        
      </div>
</template>

eksport lalai defineComponent({
  nama: 'nama',
  alat peraga: [
      'nombor',
    ],
  data() {
    kembali {
      inputValues: []
    }
  }
  });

Tetapi tiada apa yang disimpan dalam inputValues. Apa yang saya buat salah? Selain itu, bagaimanakah saya boleh memberikan medan input id yang berbeza supaya saya boleh menggayakannya secara berbeza dalam CSS nanti?

Edit: Saya berjaya membuatnya berfungsi!

 ;
        
        

Answer 1

Saya berjaya membuatnya berfungsi. v-bind: atau ":" tidak boleh digunakan dengan v-model. Saya menambah indeks kerana n bermula pada 1 bukannya 0.

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