Generate various shapes using a loop

Question

Generate various shapes using a loop

Hello, I'm currently working on creating multiple forms using a loop that is generated from dynamic elements fetched from the database. However, I believe there might be some issues in my approach. Below is what I have tried so far. While it works to some extent, I'm looking for guidance on the correct way to move forward.

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>

javascript forms vue.js vuejs3

Answer 1

Answer №1

How about this code 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>

Answer 2

How about this code 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>

Generate various shapes using a loop

Answer №1

Similar questions

A step-by-step guide on how to repeatedly reload a nextJS page using recursion and display an error page once the

Using Javascript in n8n to merge two JSON arrays into a single data structure

The resolution of the Ajax call promise remains elusive

Using React - How to access prop values within child menus of Ant Design Dropdown

Tutorial on creating a loop for a function based on a specific condition

Looking to implement pyperclip functionality on Heroku platform

How to Utilize Vue and Checkboxes for Filtering a List?

Unable to write to file due to permission restrictions from EPERM. Will delete existing file and create a new one. This action

The drop-down menu remains visible even after clicking outside of it

Error: Unable to extract the 'id' property from 'this.props.Name' because it is undefined in ReactJS

increasing the size of a picture without resorting to a pop-up window

What steps can I take to incorporate a user-controlled autoscroll feature into this Carousel?

Top scenario and illustration of utilizing clusters in nodejs

Issue: ENOENT - The requested file or directory cannot be found in the context of an Angular2 and Express.js

Any suggestions on how to secure my socket connection following user authentication in redux?

Revolutionize iPad user experience with seamless HTML5 video integration

What is an alternative approach to passing arguments to an event handler in a React render component without using a lambda function?

What steps are necessary to instruct multer to store the file in a specific directory?

"Utilizing Google Tag Manager to trigger events and push them to the data layer

Attempting to assign a value to the Progress Circle