vue 获取select选中的当前option所在对象的各种值

 

 

<template>

 

  <div>

    <select name=""

            id=""

            @change="test"

            v-model="current">

      <option v-for="(item,index) in list"

              :key="index"

              :value="item.id"

              :data-rid='item.rid'>{{item.name}}</option>

    </select>

  </div>

</template>

 

<script>

export default {

  data () {

    return {

      list: [{ id: 1, name: 'aa', rid: 123 }, { id: 2, name: 'bb', rid: 456 }],

      current: 0

    }

  },

  mounted () {

    this.current = this.list[0].id

  },

  methods: {

    test (e) {

      var that = this

      var hh = that.list.filter(function (c, i, a) {//第一个参数为当前项,第二个参数为索引,第三个为原值

        if (c.id == that.current) {

          return c

        }

      })

      var dd = hh[0].rid //获取当前option的rid的值

    }

  }

}

</script>

 

<style lang='scss' scoped>

</style>