Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Create many forms with loop

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

 <div v-for="tech in techs" :key="tech.id" class="col-12 col-lg-3">
            <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"
                  class="form-select"
                  v-model="selectUser"
                >
                  <option value="user_one">user one</option>
                  <option value="user_two">user two</option>
                </select>
                  <button type="submit" >
                    Confirm
                  </button>
              </form>

>Solution :

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" class="col-12 col-lg-3">
    <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" class="form-select"
        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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading