What is the best way to retrieve an ID from a select multiple using Element?

Question

What is the best way to retrieve an ID from a select multiple using Element?

I am working on a select element for assigning persons to a project. My goal is to send the ID of the selected person object to a specific function. Here is what I have tried so far:

 <el-form-item label="Assign to:" prop="person">
                <el-select v-model="form.persons"  multiple value-key="id"  id="person_id" @change="getData()" placeholder="Select Personal" class="max-input" filterable>
                  <el-option  v-for="person in orderedPersons"  
                            :label="person.name +' '+ person.last_name" 
                            :key="person.id"
                            :value="person">
                  </el-option>
                </el-select>

List of persons:

form: { persons: [],}

The Method:

getData() {
   var pid;
   this.pid = document.getElementById("person_id").value;
   console.log(pid);
  this.$axios.get("/person/hasproject/" + this.pid ).then(response => {
    try {             
      notifications_success(response.data.userMessage);
    } catch (error) {}
  });
},

The issue I am facing is that the pid (person ID) remains undefined, and I am struggling to find a solution. Any help or suggestions would be greatly appreciated.

javascript vue.js element

Answer 1

Answer №1

When the individuals are chosen and added through the v-model, you can access their IDs by checking the this.form.persons array and iterating through it.

For example:

form: { 
 persons: [
  {name: "Alice", id: 1}, 
  {name: "Bob", id: 2}, 
  {name: "Charlie", id: 3}
 ]
}

You can then implement something like this:

getData(){  
   this.form.persons.forEach(person=>{
    this.$axios.get("/person/hasproject/" + person.id )
        .then(//continue with your logic)

   })  
}

Answer 2

When the individuals are chosen and added through the v-model, you can access their IDs by checking the this.form.persons array and iterating through it.

For example:

form: { 
 persons: [
  {name: "Alice", id: 1}, 
  {name: "Bob", id: 2}, 
  {name: "Charlie", id: 3}
 ]
}

You can then implement something like this:

getData(){  
   this.form.persons.forEach(person=>{
    this.$axios.get("/person/hasproject/" + person.id )
        .then(//continue with your logic)

   })  
}

Answer 3

Answer №2

The current issue you are encountering aligns with what is described in the Vue.js documentation as change detection caveats.

In Summary

Because of JavaScript's nature, Vue.js cannot automatically detect changes within objects. You need to explicitly instruct Vue.js when certain changes occur using the designated method Vue.set(object, key, value). You can experiment by implementing this approach or consider alternatives such as:

Template

 <el-form-item label="Assign to:" prop="person">
   <el-select
       multiple value-key="id"
       id="person_id"
       @change="getData()" // removed
       placeholder="Select personnel"
       class="max-input" filterable
     >
     <el-option  v-for="person in orderedPersons"  
       :label="person.name +' '+ person.last_name" 
       :key="person.id"
       :value="person.id"
       @click="updateData(person)" // added
     >
     </el-option>
  </el-select>

Script

form: { persons: []},

updateData(person) {
    for (const index in this.form.persons) {
        if (this.form.persons[i].id === person.id) {
            this.form.persons.splice(i, 1);
            // it was already inside, and we put it outside
            // the form.persons array, so we're done
            return 0;
        }
    }
    // If we are here, then person wasn't inside form.persons
    // So we add it
    this.form.persons.push(person);
    this.getDatas(person.id);
},
getData(id) {
    console.log(id);
    this.$axios.get("/person/hasproject/" + id )
    .then(response => {
      try {             
        notifications_success(response.data.userMessage);
      } catch (error) {}
  });
},

This serves as a workaround to tackle the change detection caveat problem. However, based on your intentions, it may just be the right solution for you.

Answer 4

The current issue you are encountering aligns with what is described in the Vue.js documentation as change detection caveats.

In Summary

Because of JavaScript's nature, Vue.js cannot automatically detect changes within objects. You need to explicitly instruct Vue.js when certain changes occur using the designated method Vue.set(object, key, value). You can experiment by implementing this approach or consider alternatives such as:

Template

 <el-form-item label="Assign to:" prop="person">
   <el-select
       multiple value-key="id"
       id="person_id"
       @change="getData()" // removed
       placeholder="Select personnel"
       class="max-input" filterable
     >
     <el-option  v-for="person in orderedPersons"  
       :label="person.name +' '+ person.last_name" 
       :key="person.id"
       :value="person.id"
       @click="updateData(person)" // added
     >
     </el-option>
  </el-select>

Script

form: { persons: []},

updateData(person) {
    for (const index in this.form.persons) {
        if (this.form.persons[i].id === person.id) {
            this.form.persons.splice(i, 1);
            // it was already inside, and we put it outside
            // the form.persons array, so we're done
            return 0;
        }
    }
    // If we are here, then person wasn't inside form.persons
    // So we add it
    this.form.persons.push(person);
    this.getDatas(person.id);
},
getData(id) {
    console.log(id);
    this.$axios.get("/person/hasproject/" + id )
    .then(response => {
      try {             
        notifications_success(response.data.userMessage);
      } catch (error) {}
  });
},

This serves as a workaround to tackle the change detection caveat problem. However, based on your intentions, it may just be the right solution for you.

What is the best way to retrieve an ID from a select multiple using Element?

Answer №1

Answer №2

In Summary

Similar questions

Save and retrieve documents within an electron application

Steer clear of retrieving all the elements from the HTML DOM at once

Exploring VueJS templating: Loading external templates

The use of pattern fill in fabric.js is causing a decrease in rendering speed

Random crashes are observed in Selenium tests during the execution of JavaScript code

Tracking mouse movement: calculating mouse coordinates in relation to parent element

The hamburger menu unexpectedly appears outside the visible screen area and then reappears at random intervals

Encountering Uncaught Syntax Error when attempting a request with JSON parameters

The Nuxt.config.js file is responsible for rendering the noscript innerHtml element as it appears in

Leverage props in Vue 3 composables

Can a javascript variable be accessed after loading an iframe and returning to the page?

Allow users to interact with table rows by making them clickable and sending a post parameter to a jQuery

Displaying JavaScript array contents in an HTML page without using the .innerHTML property

Developing a dynamic row that automatically scrolls horizontally

When working with Firebase, I am required to extract data from two different tables simultaneously

Prevent the SnackBar from extending to full width in case of a smaller window size

React-spring is causing an increase in the number of hooks rendered compared to the previous render in React

retrieving XML information into a div using Ajax and JavaScript

the reason behind the peculiar behavior of angularjs ng-include

Displaying default tab content while hiding other tab content in Javascript can be achieved through a simple code implementation