如何使用 Element 从多个选择中获取 ID？

Question

I have a select for persons assigned to a proyect , so i need to send the ID from the object selected to a function i tried:

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

Array persons:

form: { persons: [],}

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 pid (person id) is undefined and i can't find a solution for my case, i will appreciate help and comments.

Answer 1

since the selected people are being populated through the v-model, you can access the person IDs by looking in your this.form.persons array and iterating through it.

So let's say

form: { 
 persons: [
  {name: "You", id: 1}, 
  {name: "Her", id: 2}, 
  {name: "Him", id: 3}
 ]
}

then you could do something like.

getData(){  
   this.form.persons.forEach(person=>{
    this.$axios.get("/person/hasproject/" + person.id )
        .then(//et cetera)

   })  
}

Answer 2

You are facing what is referenced in Vue.js documentation as change detection caveats .

Tl;dr

Due to the nature of javascript, Vue.js can't watch for changes inside objects. You have to tell him explicitly that some changes occured by using the provided method Vue.set(object, key, value) . You can give a try by using it, or avoiding it by, for example, doing so:

Template

 <el-form-item label="Assign to:" prop="person">
   <el-select
       multiple value-key="id"
       id="person_id"
       @change="getData()" // removed
       placeholder="Seleccione personal"
       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) {}
  });
},

It's just a way to avoid the problem of detection caveat, but if I understand what you are trying to attempt, then it will probably be sufficient.