Angular 2动态行问题：输入框值可获取，下拉框值无法获取且报错

我帮你分析并解决这个动态行下拉框的问题哈，大概率是绑定逻辑和循环key的设置不当导致的，咱们一步步来处理：

1. 核心问题排查 #

你遇到的下拉框值获取失败、选择时报错，最常见的原因有两个：

• 动态循环行时没有设置唯一key，导致Vue虚拟DOM复用组件，下拉框的状态混乱
• 下拉框的v-model绑定没有对应到每行数据对象的属性，或者初始值未定义

2. 具体解决方案 #

（1）给循环行设置唯一key #

一定要给v-for绑定唯一的key属性，不要直接用循环的index（删除行时index会变化，引发组件复用问题），可以用时间戳、自增ID这类唯一标识：

<!-- 错误示例：用index当key -->
<div v-for="(item, index) in rows" :key="index">...</div>

<!-- 正确示例：用每行的唯一id当key -->
<div v-for="(item, index) in rows" :key="item.id">...</div>

（2）统一每行的数据结构 #

初始化和添加新行时，要给下拉框对应的属性设置默认值，确保v-model有合法的绑定目标：

data() {
  return {
    // 初始行就包含所有字段，包括下拉框绑定的属性
    rows: [{ id: Date.now(), name: "", data: "", num: "", char: "" }]
  };
},
methods: {
  addRow() {
    this.rows.push({
      id: Date.now(), // 用时间戳生成唯一id
      name: "",
      data: "", // 给下拉框绑定的字段设默认空值
      num: "",
      char: ""
    });
  },
  logResults() {
    // 这里就能正确获取包含下拉框值的所有行数据了
    console.log(this.rows);
  }
}

（3）正确绑定下拉框的v-model #

直接把下拉框的v-model绑定到循环的item对象属性上，不要通过index间接绑定：

<select v-model="item.data">
  <option value="123">Data 123</option>
  <option value="456">Data 456</option>
  <option value="789">Data 789</option>
</select>

完整可运行示例 #

把这些逻辑整合起来，就是一个能正常工作的版本：

<template>
  <div>
    <div v-for="(item, index) in rows" :key="item.id" class="row">
      <input v-model="item.name" placeholder="Enter name" />
      <select v-model="item.data">
        <option value="123">Data 123</option>
        <option value="456">Data 456</option>
        <option value="789">Data 789</option>
      </select>
      <input v-model="item.num" placeholder="Number" />
      <input v-model="item.char" placeholder="Character" />
    </div>
    <button @click="addRow">Add row</button>
    <button @click="logResults">Show Results</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: [{ id: Date.now(), name: "", data: "", num: "", char: "" }]
    };
  },
  methods: {
    addRow() {
      this.rows.push({
        id: Date.now(),
        name: "",
        data: "",
        num: "",
        char: ""
      });
    },
    logResults() {
      console.log(JSON.parse(JSON.stringify(this.rows)));
    }
  }
};
</script>

<style scoped>
.row {
  margin: 8px 0;
}
input, select {
  margin-right: 8px;
  padding: 4px;
}
</style>

这样修改后，你点击「Show Results」就能在控制台看到包含下拉框data字段的完整行数据，选择下拉框时也不会再出现报错啦。

内容的提问来源于stack exchange，提问作者John Theoden