vue.js - Vue - 在 v-for 中加载动态下拉列表以进行编辑

Question

我的表单具有创建多个字段的功能，并且每个字段都有动态下拉列表。创建新表单时，动态下拉菜单运行顺畅，但是当我尝试编辑加载所有数据的表单时，很难加载数据row.section_objective_id，row.section_kpa_id因为它对v-for index.

corporate_objectives: [],
department_objectives: [],
tableItems {
 rows: [],
}

<base-select
  v-model="tableItem.corporate_objective_id"
  :items="corporate_objectives" 
  item-text="name" 
  item-value="id"
  @change="getDepartmentObjectives()"
/>

<v-btn @click="addKPA()"</v-btn>

<div v-for="(row, index) in tableItem.rows" :key="row.id">
   <base-select
     v-model="row.deparment_objective_id"
     :items="department_objectives" 
     item-text="name" 
     item-value="id"
     @change="getSectionObjectives(index)"
   />
   <base-select
     v-model="row.section_objective_id"
     :items="row.section_objectives" 
     item-text="name" 
     item-value="id"
     @change="getSectionKPA(index)"
   />
   <base-select
     v-model="row.section_kpa_id"
     :items="row.section_kpas" 
     item-text="name" 
     item-value="id"
   />
</div>

 created() {
   this.getEmployeeObjectives()
 }

  methods: {
     addKPA() {
      this.tableItem.rows.unshift({
        department_objective_id: '',
        section_objectives: [],
        section_objective_id: '',
        section_kpas: [],
        section_kpa_id: '',
      })
    },
    async getEmployeeObjectives() {
      try {
       let res = await axios.get('/api/employee-objectives')
       this.tableItem = await Object.assign({}, res.data)
       this.getDepartmentObjectives()
      } catch(error) {
       console.log(error)
      }
    },
    async getCorporateObjectives() {
      try {
        let res = await axios.get('/api/corporate-objectives')
        this.corporate_objectives = _.orderBy(res.data, ['name'], ['asc'])
      } catch(error) {
        console.log(error)
      }
    },
    async getDepartmentObjectives() {
      try {
        let res = await axios.get('/api/corporate-department-objective',
        { params: { corporate_objective_id: this.tableItem.corporate_objective_id }})
        this.department_objectives = _.orderBy(res.data, ['name'], ['asc'])
      } catch(error) {
        console.log(error)
      }
    },

    async getSectionObjectives(index) {
      try {
        let res = await axios.get('/api/department-section-objective',
        { params: { department_objective_id: this.tableItem.rows[index].department_objective_id }})
        this.tableItem.rows[index].section_objectives = _.orderBy(res.data, ['name'], ['asc'])
      } catch(error) {
        console.log(error)
      }
    },
    async getSectionKPA(index) {
      try {
        let res = await axios.get('/api/section-kpa',
        { params: { section_objective_id: this.tableItem.rows[index].section_objective_id }})
        this.tableItem.rows[index].section_kpas = _.orderBy(res.data, ['name'], ['asc'])
      } catch(error) {
        console.log(error)
      }
    },
  }

标签： vue.js