Vue移动端响应式select菜单选择后不切换展示数组值问题排查

问题原因 #

• 核心问题是移动端<select>下拉框没有绑定change事件，选择选项时不会触发你写的changeTab切换逻辑，所以内容不会更新。
• 其次你给<option>设置的key用了tab.name，但你多个tab的name都是PDF重复，会导致渲染异常，应该用唯一的tab.id作为key。
• 另外移动端内容展示的div上绑定了多余的@click和:href属性，属于无效代码。

修复步骤 #

1. 修改<select>标签，绑定change事件，同时给<option>绑定value为tab.id

<select 
  id="tabs" 
  name="tabs" 
  class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"
  @change="handleSelectChange"
>
  <option 
    v-for="tab in tabs" 
    :key="tab.id" 
    :value="tab.id"
    :selected="tab.current"
  >
    {{ tab.name }}
  </option>
</select>

2. 在setup中新增handleSelectChange方法，监听下拉选择动作触发tab切换

const handleSelectChange = (e) => {
  // 拿到选中的tab id，转成数字类型匹配你的tab.id格式
  const selectedTabId = Number(e.target.value)
  // 找到对应的tab对象
  const targetTab = tabs.value.find(item => item.id === selectedTabId)
  // 调用已有的切换方法
  changeTab(targetTab)
}

记得把handleSelectChange加入setup的return值里。

3. 清理无效代码，把移动端内容区域div的@click="changeTab(tab)"和:href="tab.href"属性删除，这两个属性对内容展示块没有作用。

4. 可选优化：你原有的changeTab方法用map遍历语义不合适，改成forEach更符合遍历修改的场景：

const changeTab = (selectedTab) => {
  tabs.value.forEach(t => {
    t.current = t.id === selectedTab.id
  })
}

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