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>

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

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

I've been experimenting with a recursive page reload function that looks like this: export const refreshPage = (count)=>{ if (count <= 0){ // window.location.reload(); console.log("blue"); return }else { console.log(& ...

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

When working on a project, I extract JSON objects from the Zammad-API. One of the tickets retrieved is as follows: [ { "id": 53, "group_id": 2, "priority_id": 2, "state_id": 2, "organizati ...

The resolution of the Ajax call promise remains elusive

When I make an AJAX call to a REST API in my JavaScript code, the purpose is to fetch a JSON file. The structure of the AJAX call resembles something like this: $.ajax(ajaxObj).then(function(response) {}).catch(function(err) {}); The network monitor refl ...

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

I have a feed of posts similar to a Facebook timeline, where each post has a dropdown menu with options for "edit, delete, report". Using the Ant Design UI library, I encountered an issue where I couldn't access the prop value "DeleteId" within the c ...

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

I have created two different div classes named box and box2. The box2 class can be dragged and dropped into any of the three box classes. Each box contains randomly chosen values from an array, while box2 contains its corresponding image for display. When ...

Looking to implement pyperclip functionality on Heroku platform

Is it feasible to utilize pyperclip on Heroku with a Selenium application in order to copy something to the clipboard? Since the platform utilizes a 'headless' browser and lacks a GUI, accessing the clipboard is challenging. Is there any way for ...

How to Utilize Vue and Checkboxes for Filtering a List?

My current challenge involves filtering a list of posts based on userId using checkboxes. The data is being retrieved from: https://jsonplaceholder.typicode.com/posts. I aim to include checkboxes that, when selected, will filter the list by userId. Here is ...

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

I am encountering an issue with my file system function that involves deleting a file and creating a new one with updated data. The error occurs randomly, not consistently, happening approximately every other time the code runs. Below is my current impleme ...

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

I've written a script that works when clicked, but it doesn't hide when clicked outside of it. $(document).ready(function() { //Translate(); //caling Language Translater function $("#translate_image").attr('href', base_url) ...

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

Can you please assist me in resolving this issue? Error: Cannot destructure property 'id' of 'this.props.Name' as it is undefined. src/component/Detail.js file import React, { Component } from 'react'; import { Character } f ...

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

Struggling to implement a product details tab within a table that features a clickable image. When the image is clicked, it should enlarge but the width doesn't adjust accordingly. I'm using bootstrap 5.3 and can't seem to identify the root ...

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

I am in the process of creating a "slideshow" using text boxes that can be scrolled with arrow buttons. My goal is to have the slideshow automatically scroll only until the user interacts by clicking one of the arrow buttons. Below is the state logic re ...

Top scenario and illustration of utilizing clusters in nodejs

I've been exploring the concept of clusters and I'm still a bit unclear about the most effective use-case scenario for them. Can anyone provide an example to help clarify this for me? ...

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

I have made some changes to the Angular2 app on GitHub in order to use Express.js instead of KOA. However, when I try to load the app in FireFox, I encounter the following error in the `nodemon` console: Error: ENOENT: no such file or directory The Angul ...

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

After onSubmit, userAction.login is called which then dispatches "SUCCESS_AUTHENTICATE" to set the token of the user and socket state in their respective reducers. How can I proceed to trigger socket.emit("authenticate", {token})? ...

Revolutionize iPad user experience with seamless HTML5 video integration

What is the most effective method for dynamically embedding HTML5 video to ensure compatibility with the iPad? (using pure Javascript) I'm having difficulty getting this approach to work: <div id="placeholder"><script type="text/javascript" ...

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

In my React app, I've learned that using lambda functions in the property of a render component can harm application performance. For example: <ConfirmSmsModal modal={args.modal} smsCheck={async (code: string) => { return await this._vm ...

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

Having some issues with multer while trying to save an image in a specific folder. The path for the file gets uploaded to mlab successfully, but the problem arises when attempting to retrieve the image from the designated folder as it fails to save there ...

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

My goal with this code is to trigger an event in the data layer through Google Tag Manager whenever a user hovers over a specific area on the website for at least 1 second. The challenge I'm facing is that I have 8 other areas on the site using the sa ...

Attempting to assign a value to the Progress Circle

Can I modify the code to incorporate a hardcoded number instead of displaying "Goals completed:" and still have the progress bar reflect the percentage? I want to hide the prompt for users to input a number and handle all updates behind the scenes. Essent ...