无法根据选中的decorData获取description数据（Vue依赖下拉框问题）

核心问题分析 #

你的getDescription方法存在三个关键错误：

1. 模板调用时未传递当前tab的索引，无法定位到对应tab下的row
2. 参数获取错误：rows是数组，不能直接用rows.selectedDecor，需通过row索引定位具体行
3. 赋值语法错误：this.[this.tabs.length - 1]是无效写法，且未定位到具体row的selectedDes

1. 模板代码修改 #

修改装饰类型下拉框的@change事件，同时传递tab索引和row索引：

<div v-for="(tab, tabIndex) in tabs" :key="tab.id">
  <!-- 其他代码不变 -->
  <div v-for="(row, rowIndex) in tab.rows" :key="row.id">
    <table class="table table-borderless col-md-12">
      <!-- 其他代码不变 -->
      <tbody>
        <td>
          <select v-model="row.selectedDecor" @change="getDescription(tabIndex, rowIndex)">
            <option v-for="decorType in tab.decorTypes" :key="decorType.id" :value="decorType.id">
              {{ decorType.name }}
            </option>
          </select>
        </td>
        <!-- 其他代码不变 -->
      </tbody>
    </table>
  </div>
</div>

2. 脚本方法修改 #

修正getDescription方法的参数获取与赋值逻辑：

getDescription(tabIndex, rowIndex) {
  // 获取当前选中的装饰类型ID
  const selectedDecorId = this.tabs[tabIndex].rows[rowIndex].selectedDecor;
  if (!selectedDecorId) return; // 空值时不发起请求

  axios.get("/api/description", {
    params: {
      id: selectedDecorId
    }
  })
  .then(response => {
    console.log(response.data);
    // 将接口返回的描述赋值给对应row的selectedDes（若接口返回对象，需调整为response.data对应的字段，比如response.data.description）
    this.tabs[tabIndex].rows[rowIndex].selectedDes = response.data;
  })
  .catch(error => {
    console.error("获取描述失败：", error);
  });
}

额外优化建议 #

• 给tabs和rows的初始数据添加唯一id，避免v-for的key警告
• getDecor方法建议改为通过tabIndex定位当前tab，而非直接取最后一个tab，避免新增tab后逻辑出错

内容的提问来源于stack exchange，提问作者rahi bd