Как передать id выбранного элемента, а не его значение?

Question

[Алексей]

Есть запрос к API на получение данных, получаю следующий ответ
id: 1
name: 'отдел'

Данные получаемые от API выводятся в select и связываются с переменной через v-model
Как записать в переменную выбранный пользователем id,а не name?

<select class="input_filter_staff" style="margin-top: 7px; cursor: pointer;" v-model="filter_staff.groups"  @change="updateFilterDataStaff">
    <option
        v-for="groupsFilter in groupsFilterStaff" :key="groupsFilter.id" v-bind="groupsFilter.id">
        {{groupsFilter.name}}
    </option>
    </select>

import { mapState } from 'vuex'
import api from '@/api/staff'
export default {
    name: 'FilterStaff',
    data(){
        return {
            filter_staff : {
                first_name: '',
                last_name: '',
                email: '',
                groups: ''
            },
            groupsFilterStaff: ''
        }
    },
    computed: {
        ...mapState({
            user: state => state.auth.user,
            uid: state => state.auth.uid
        })
    },
    methods: {
        updateFilterDataStaff(){
            this.$emit('updateFiltersStaff', this.filter_staff)
        }
    },
    mounted() {
        api.getStaffGroup()
        .then((response) => {
            this.groupsFilterStaff = response.data.data
        })
    }

}

Answer 1

[Сергей delphinpro]

Вам бы основы HTML подтянуть https://developer.mozilla.org/en-US/docs/Web/HTML/...

<select class="input_filter_staff" style="margin-top: 7px; cursor: pointer;" v-model="filter_staff.groups"  @change="updateFilterDataStaff">
    <option
        v-for="groupsFilter in groupsFilterStaff"
        :key="groupsFilter.id"
        :value="groupsFilter.id"
    >
        {{groupsFilter.name}}
    </option>
</select>