[Vue, Bootstrap vue] b-form-select 선택된 object 그대로 가져오기

b-form-select 사용 시 v-model에 연동한 값에 value 값만 들어오는데, text 값도 필요한 상황이었다.

 

결론은 :options 대신 b-form-select-option을 사용하면 된다.

<예제>

value 값을 options으로 설정해주면 선택한 객체 값이 통째로 넘어간다.(ex. { id: 1, name: 'Mike Macdonald', age: 42 })

<template>
    <div>
        <b-form-select
        v-model="selectedItem"
        >
            <b-form-select-option
                v-for="option in selectOptions"
                :key="option.value"
                :value="option"
                >
                {{ option.text }}
                </b-form-select-option>
        </b-form-select>
    </div>
</template>

<script>
    export default {
        data() {
        return {
         selectedItem: null,
         options: [
            { id: 1, name: 'Mike Macdonald', age: 42 },
            { id: 2, name: 'Larsen Shaw', age: 27 },
            { id: 3, name: 'Jami Cord', age: 81 },
          ],
         }
     }
    }
</script>

<style lang="scss" scoped>

</style>

 

<value만 넘어가는 :options 사용한 예제>

원래 option 항목을 연동할 때 아래와 같이 :options를 이용하여 연동했었다.

<template>
    <div>
        <b-form-select
        v-model="selectedItem"
        :options="selectOptions"
        >
        </b-form-select>
    </div>
</template>

<script>
    export default {
        data() {
        return {
         selectedItem: null,
         options: [
            { id: 1, name: 'Mike Macdonald', age: 42 },
            { id: 2, name: 'Larsen Shaw', age: 27 },
            { id: 3, name: 'Jami Cord', age: 81 },
          ],
         }
     }
    }
</script>

 

 

 

 

참고

https://stackoverflow.com/questions/68088853/bootstrap-vue-selecting-the-object-from-a-list-of-objects-b-form-select