如何使用 Element 从 select 倍数中获取 ID？

Question

我将 persons 的 select 分配给了 proyect，所以我需要将 object 中选择的 ID 发送到 function 我试过了：

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

数组人数：

form: { persons: [],}

方法

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) {}
  });
},

pid（人员 ID）未定义，我找不到适合我的情况的解决方案，我将不胜感激帮助和评论。

Answer 1

由于所选人员是通过 v 模型填充的，因此您可以通过查看 this.form.persons 数组并遍历它来访问人员 ID。

那么假设

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

然后你可以做类似的事情。

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

   })  
}

Answer 2

您面临的问题在 Vue.js 文档中被称为 change detection caveats。

Tl;博士

由于 javascript 的性质，Vue.js 无法观察对象内部的变化。你必须明确地告诉他，使用提供的方法 Vue.set(object, key, value) 发生了一些变化。您可以尝试使用它，或者避免使用它，例如：

模板

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

脚本

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) {}
  });
},

这只是一种避免检测警告问题的方法，但如果我了解您要尝试的内容，那么它可能就足够了。

如何使用 Element 从 select 倍数中获取 ID？

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

javascript

element

vue.js

Tl;博士