Tl; dr

Question

我为select分配了persons的{{1}}，因此我需要将proyect中的ID从选定的object发送到{{1 }}我尝试过：

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) {} }); },（个人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; dr

由于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从多个选择中获取ID？

2 个答案:

Tl; dr