Create many forms with loop-CodePudding

Hello I am trying to create several forms from a loop that comes from dynamic elements loaded from the database. However I think I am doing it wrong here is what I have already done. It works more or less but I would like to have the right way to proceed.

Thanks in advance

submitForm: function (e) {
      e.preventDefault();
      e.target.elements.techId.value // OK
      this.selectUser // value is other form not form used button
}

Template

 <div v-for="tech in techs" :key="tech.id" >
            <h3>{{ tech.name }}</h3>
              <form
                name="form_tech"
                method="POST"
                @submit="submitForm"
              >
                <input type="hidden" :value="tech.id" name="techId" id="techId" />
                <select
                  name="select_user"
                  
                  v-model="selectUser"
                >
                  <option value="user_one">user one</option>
                  <option value="user_two">user two</option>
                </select>
                  <button type="submit" >
                    Confirm
                  </button>
              </form>

CodePudding user response：

Maybe like following snippet:

const app = Vue.createApp({
  data() {
    return {
      techs: [{id: 0, name: 'aa'}, {id: 1, name: 'bb'}, {id: 3, name: 'cc'}],
      selectUser: []
    };
  },
  methods: {
    submitForm(id) {
      console.log(this.selectUser[id]) 
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="tech in techs" :key="tech.id" >
    <h3>{{ tech.name }}</h3>
    <form name="form_tech" method="POST"
      @submit.prevent="submitForm(tech.id)"
    >
      <input type="hidden" :value="tech.id" name="techId" id="techId" />
      <select name="select_user" 
        v-model="selectUser[tech.id]"
      >
        <option value="user_one">user one</option>
        <option value="user_two">user two</option>
      </select>
      <button type="submit">Confirm</button>
    </form>
  </div>
</div>