Efficient strategies for managing v-models in dynamic input fields

Question

I have a form that gives the user the option to click an "Add" button and enter content into a new field. I currently have the v model dynamically generated for the fields, but I realize that I need to register/return each field in the setup function in order to use them.

How do I generate and register/return v-models for different input fields if I don't know how many fields the user will decide to add?

<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

Please take a look at the following code snippet with a simple dynamic v model:

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 }}