Как задать V-model у генерируемого элемента?

Question

[Алексей]

Как задать v-model у каждого input который создается при нажатии на кнопку
Его создание необходимо для дальнейшей передачи данных на сервер

//Генерируемый блок
<div class="d-block text-center"  v-for="(item, index) in ContractAnnexes" :key="item.id" style="margin-top: 3%;">
  <h4>Приложение {{ index+1 }}</h4>
      <div  style="display: flex; justify-content: space-around;">
        <label for="">Тип приложения <br>
          <input type="text" class="textarea">
        </label>
        <label for="">Номер приложения <br>
          <input type="text" class="textarea" >
        </label>
        <label for="">Дата <br>
          <input type="date" class="textarea" >
        </label>
      </div>

      <div  style="display: flex; justify-content: space-around;">
        <label for="">Примечание<br>
          <input type="text" class="textarea" >
        </label>
        <label for="">Скан-копия  <br>
          <input type="text" class="textarea" >
        </label>
        <label for="">Номер договора <br>
          <input type="text" class="textarea" >
        </label>
      </div>
     <div style="display: flex; justify-content: space-around; margin-top: 2%;">
      <button style="width: 15%" class="button Delete"  @click="DeleteContractAnnexes(index)">Удалить приложение</button>
     </div>
     <hr>
  </div>  
  <div style="display: flex; justify-content: space-around; margin-top: 3%;">
    <button style="width: 15%" class="button Cancel"  @click="AddContractAnnexes()" >Добавить приложение</button><br>  

...

// Как создаю элемент

export default{
  data(){
    return{

      ContractAnnexes: [],
      nextTodoId:0,
      Documents: {
        number:'',
        company_status: '',
        created_at: '',
        department: '',
        contract_type: '',
        contract_object: '',
        fiat_amount: '',
        expiration_date: '',
        prolongation: '',
        is_active : '',
        file:'',
            counterparty: {
              created_at: '',
              work_name: '',
              short_name: '',
              full_name: '',
              els: '',
              ogrn: '',
              inn: '',
              kpp: '',
              legal_address: '',
              manager: '',
              phone: '',
              group: '',
            }
         } 
      }  
  },
methods: {
  AddContractAnnexes(){
      this.ContractAnnexes.push({
        id: this.nextTodoId++,
        date: '',
        doc_type: '',
        number:'',
        comment:'',
        scan: '',
        contract: ''
    })
}

Comments

[iBird Rose]

весь этот блок засунь в отдельный компонент и передавай данные item из v-for через пропсы. а внутри уже у тебя будет у каждого свой v-model. потом хоть че с ними делай

[Алексей]

iBird Rose, верно понял, что v-model так же в другой компонент выкидываю?

[iBird Rose]

Алексей, я хз какая у тебя там логика. но по коду там несколько данных. можешь стор завести с массивом объектов и туда записывать все данные из каждого такого компонента. а потом в родительском при сабмите уже забирать весь массив - обработать и отправить