vue给option加点击事件问题

Question

            <select v-model="value" @change="configData(index)" placeholder="请选择轨道">
                <option
                    v-for="(item,index) in headData"
                    :key="item.value"
                    :value="item.value">
                </option>
            </select>

因为直接在option加click事件是不触发的,所以改为change事件,但是我想拿到option的index,然后给configData传参数,有没有办法

Answer 1

你的index不是和value一样的吗？ 直接拿value就可以了

Answer 2

文档有介绍

Answer 3

<template>
  <div class="hello">
    <h1>Hello</h1>
    <p>{{$store.state.count}}</p>
    <select v-model="selected" @change="configData(selected)" placeholder="请选择轨道">
      <option v-for="(item,index) in headData" :value="index">
        {{ item.value }}
      </option>
    </select>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        headData: [{
          value: 'a'
        }, {
          value: 'b'
        }],
        selected: ''
      }
    },
    methods: {
      configData (index) {
        console.log(index)
        console.log(this.headData[index].value)
      }
    }
  }
</script>