vue同时获取select的id和value

<template>
  <div class="select1">
    <select v-model="selectClassEnd" @change="selectClass($event)">
      <option value="NONE">未选择</option>
      <option v-for="(options,id) in selectClassData" :key="id" :value="options.id">
        {{ options.title }}
      </option>
    </select>
    <p>{{ select_class_id }}---{{ select_class_title }}</p>
  </div>
</template>

<script>
export default {
  name: 'selectClass',
  data() {
    return {
      selectClassData: [ // 类别选择数据或者从后台获取数据
        {id: 1, title: '科普类'},
        {id: 2, title: '亲子类'},
        {id: 3, title: '制作类'},
        {id: 4, title: '创意类'}
      ],
      selectClassEnd: 'NONE', // 类别默认选择
      select_class_id: '',
      select_class_title: ''
    }
  },
  methods: {
    // 类别选中
    selectClass(event) {
      this.select_class_id = event.target.value
      this.select_class_title = event.target.options[event.target.selectedIndex].text
    }
  }

}
</script>

<style scoped>
</style>