How can i get an ID from a select multiple using Element?

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

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.