Vue循环中无法为对应输入框设置选中值问题求助

1. 全局变量导致同步更新：你用了单个的itemCode和selected变量绑定所有行的输入框和下拉框，所有组件共享同一个数据源，所以选中任何一个下拉项，所有输入框都会显示相同值。
2. DOM操作脱离Vue响应式：用jQuery直接修改输入框的val()绕过了Vue的响应式系统，Vue无法追踪数据变化；而且setTheValue是独立函数，内部的this不是Vue实例，导致this.selected无法正确获取选中值。
3. 下拉框显示状态全局控制：showFav是全局变量，点击任何一个按钮，所有行的下拉框都会同时显示/隐藏，不符合需求。

1. 重构数据结构 #

在Vue的data中定义两个对象，分别存储每行的输入值和下拉框显示状态：

data() {
  return {
    itemList: [1, 2, 3], // 你的原循环数组
    favList: ['A', 'B', 'C', 'D'],
    itemCodes: {}, // 存储每行输入值，键对应itemList的项
    showFav: {} // 存储每行下拉框的显示状态
  }
}

2. 修改HTML模板 #

<tr v-for="items in itemList" :key="items">
  <td valign="top">&nbsp;{{items}}&nbsp;</td>
  <td align="left" nowrap>
    <!-- 绑定对应行的独立数据源 -->
    <input v-model="itemCodes[items]" type="text" :id="'item_code_'+items" 
           @input="handleInput" 
           size="20" maxlength="27"
           autocomplete="off">
    <br/>
  </td>
  <td align="left" nowrap>
    <a class="dropdown" style="text-decoration:none;font-size:10pt; padding-left: 10px;padding-right: 10px;"
       @click="loadFavs(items)"
       href="javascript:void(0)" title="Click to choose an item from your favorites">
      <img hspace="3" alt="Favorites" src="/images/icons/LoadFav.png" 
           height="16" width="16"
           onmousemove="this.style.cursor='pointer'" 
           :id="'bd_fav_image_' + items" title="Click to choose an item from your favorites">
      <!-- 绑定当前行的下拉框显示状态 -->
      <select class="dropdown-content" v-if="showFav[items]" name="BOMList" 
              :id="'bd_list_'+items" style="font-size:10pt;width: 100%" 
              @change="selectingFav(items, $event.target.value)">
        <option value=""></option>
        <option  v-for="(fav,index) in favList" :key="index" :value="fav">
          {{fav}} {{index}}
        </option>
      </select>
    </a>
  </td>
  <td valign="top" nowrap >
    <input type="Text"
           :id="'bd_qty_'+items" <!-- 修正原代码的index绑定错误 -->
           size="2"
           inputmode="numeric">
  </td>
</tr>

3. 修改JS方法 #

methods: {
  loadFavs(items) {
    // 切换当前行的下拉框显示状态
    this.$set(this.showFav, items, !this.showFav[items]);
  },
  selectingFav(items, selectedValue) {
    // 直接将选中值赋值给对应行的数据源
    this.$set(this.itemCodes, items, selectedValue);
    console.log(`选中项：${selectedValue}，对应行：${items}`);
  },
  handleInput() {
    // 保留你的原输入处理逻辑
  }
}

关键修改说明 #

• 独立数据源绑定：itemCodes[items]确保每行输入框绑定独立的数据，不会互相干扰。
• 单独控制下拉框显示：showFav[items]让每行下拉框的显示状态各自独立，点击哪个按钮就只显示对应行的下拉框。
• 抛弃DOM操作：通过Vue响应式数据更新输入框，完全不需要jQuery，确保数据与视图同步。
• 直接传递选中值：在@change事件中直接获取下拉框选中值，不再依赖全局selected变量。

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