Strategi cekap untuk mengurus model-v dalam medan input dinamik

Question

Saya mempunyai borang yang memberi pengguna pilihan untuk mengklik butang "Tambah" dan memasukkan kandungan ke dalam medan baharu. Pada masa ini saya mempunyai model v yang dijana secara dinamik untuk medan, tetapi saya menyedari bahawa saya perlu mendaftar/mengembalikan setiap medan dalam fungsi persediaan untuk menggunakannya.

Bagaimana saya boleh menjana dan mendaftar/mengembalikan v-model untuk medan input yang berbeza jika saya tidak tahu berapa banyak medan yang pengguna akan memutuskan untuk menambah?

<div
    v-for="(content, i) in contentFields"
    :key="i"
>
  <div>Content {{ i }}</div>
        <q-input
          :v-model="`contentName_` + i"
          outlined
          type="text"
          dense
        />
 </div></div>

Answer 1

Sila lihat coretan kod berikut dengan model v dinamik ringkas:

new Vue({
  el: "#demo",
  data() {
    return {
      contentFields: [{name: '', desc: ''}]
    }
  },
  methods: {
    addInput() {
      let newI = this.contentFields.length
      this.contentFields.push({name: '', desc: ''})
    },
    setD() {
      console.log(this.contentFields)
    }
  }
})

sssccc

  add
  

    
Content {{ i }}