Vue 中 Select 获取选中项索引的实战技巧

在 Vue 开发中，处理下拉框（Select）时，我们往往不仅关心选中的值（value），有时还需要知道它在列表中的具体位置（index）。虽然 v-model 能方便地绑定数据，但若要精准获取 DOM 层面的索引，监听原生事件依然是最直接的方式。

下面是一个基于 Vue 2 的示例，展示了如何通过 change 事件同时获取索引和值：

<div id="app">
    <select v-model="selectItem" @change="selectFn($event)">
        <!--选择项的 value 值默认选择项文本 可动态绑定选择项的 value 值 更改 v-model 指令绑定数据-->
        <option v-for="item in items" :value="item.id">{{item.name}}</option>
    </select>
    <div>{{selectItem}}</div>    <!--选择项的 value 值-->
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            selectItem: '分类 1',
            items: [
                {id:11, name: '分类 1'},
                {id:22, name: '分类 2'},
                {id:33, name: '分类 3'}
            ]
        },
        methods: {
            selectFn(e) {
                console.log(e)
                console.log(e.target.selectedIndex) // 选择项的 index 索引
                console.log(e.target.value) // 选择项的 value
            }
        }
    })
</script>

这里的关键在于 e.target。当用户触发 change 事件时，DOM 对象会暴露出 selectedIndex 属性，这直接对应了 <option> 在列表中的物理位置。配合 v-model 绑定的 selectItem，你可以灵活地在业务逻辑中决定是依赖数据驱动还是事件驱动。

当然，如果业务允许，还有一种更简洁的思路。Select 组件的数据结构支持数组或对象，无需每次通过 onchange 事件重新赋值。默认值可以直接指向数组首项的引用，这样在初始化或重置时，状态管理会更自然，减少不必要的计算开销。根据实际场景选择合适的方式，能让代码既清晰又高效。