Create many forms with loop

Question

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

What is this.selectedUser ? It should be this.selectUser — Rohìt Jíndal
– Rohìt Jíndal, Commented May 20, 2022 at 19:40
As you are creating form fields dynamically. v-model should be unique. Hence, instead of selectUser, you can use tech.selectUser — Rohìt Jíndal
– Rohìt Jíndal, Commented May 20, 2022 at 19:47

Nikola Pavicevic · Accepted Answer · 2022-05-20 19:49:46Z

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>

Collectives™ on Stack Overflow

Create many forms with loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related