使用getElementById获取v-select的值返回undefined或空值问题

核心问题原因 #

1. Vuetify组件的DOM结构特殊性：v-select是封装后的组件，你看到的input元素仅用于交互，实际选中值并不存储在该input的value属性里，直接用document.getElementById拿值自然拿不到正确结果。
2. v-model绑定错误：当前所有行的v-select都绑定到全局的selectedItem，多行编辑时会互相覆盖，且无法对应到每行的独立数据。
3. 违背Vue数据驱动原则：Vue是数据驱动框架，应直接从绑定的数据源取值，而非操作DOM获取。

修正步骤 #

1. 修复v-select的绑定逻辑

把v-select的v-model绑定到当前行item的对应字段，而非全局变量。根据你的itemJsonKey规则，直接在模板中处理绑定：

<v-select  
  v-else-if="head.fieldType === 'select'"
  :disabled="getFieldAccess(head, item)"
  :value="getFieldValue(head, item)"
  :id="getFieldId(head, item)"
  :items="['YES', 'NO']"
  <!-- 根据字段路径绑定到item的对应属性 -->
  v-model="head.itemJsonKey.startsWith('attributes.') 
    ? item.attributes[head.itemJsonKey.slice('attributes.'.length)] 
    : item[head.itemJsonKey]"
></v-select>

注：如果是对象数组类型的items，才需要item-text和item-value，当前用简单字符串数组可以直接省略这两个属性。

2. 重构保存函数，直接从数据源取值

删除document.getElementById的DOM操作，直接从dataItems的item中读取修改后的值：

collateDataAndInvokeSave: function() {
  let arrChangedData = [];
  for (let iRow = 0; iRow < this.dataItems.length; iRow++) {
    let item = this.dataItems[iRow];
    let physicalId = item["physicalid"];
    let attributes = {};
    let changedRowData = {};
    let hasChanges = false;

    for (let iCol = 0; iCol < this.columnHeaders.length; iCol++) {
      let head = this.columnHeaders[iCol];
      let attrExpr = head["itemJsonKey"];
      let existingVal = this.getFieldValue(head, item);
      // 直接从item中获取最新值
      let newVal = attrExpr.includes("attributes.") 
        ? item.attributes[attrExpr.slice("attributes.".length)] 
        : item[attrExpr];

      console.log("existingVal --> " + existingVal + " newVal --> " + newVal);
      // 仅收集有变化的数据
      if (existingVal !== newVal) {
        hasChanges = true;
        if (attrExpr.includes("attributes.")) {
          let attrName = attrExpr.slice("attributes.".length);
          attributes[attrName] = newVal;
        } else {
          changedRowData[attrExpr] = newVal;
        }
      }
    }

    if (hasChanges) {
      changedRowData["physicalid"] = physicalId;
      if (Object.keys(attributes).length > 0) {
        changedRowData["attributes"] = attributes;
      }
      arrChangedData.push(changedRowData);
    }
  }
  console.log("待保存的变更数据 ==>", arrChangedData);
  // 此处调用保存接口，传入arrChangedData即可
}

为什么这样改？ #

• 符合Vue数据驱动的核心逻辑，所有用户操作都会自动同步到dataItems中，取值更可靠。
• 避免了操作封装组件DOM的兼容性问题，Vuetify组件的内部结构可能随版本变化，直接操作DOM会导致代码脆弱。
• 解决了多行编辑时值互相覆盖的问题，每个下拉框对应独立的item字段。

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