How to get option key from a select using Vue.js with Laravel

Question

I am using Vue.js 2 with Laravel 7. I must do an insert to the db through a form submit but I am unable to get the option key of a select.

This is the select:

        <div class="form-group">
            <label for="room">Room:</label>
            <select v-model="room" class="form-control" id="room">
                <option v-for="room in rooms" :key="room.id">
                    {{ room.name }}
                </option>
            </select>
        </div>

This is the script:

export default {
    props: ['hours'],
    mounted() {
        console.log('Component mounted.');
        this.loadUsers();
        this.loadRooms();
    },
    data: function() {
        return {
            users: [],
            rooms: [],
            room: ''
        }
    },
    methods: {
        onCreate: function (args) { 
            let value = this.$refs.textareaObj.value; 
            alert(value); 
        },
        loadUsers: function() {
            axios.get('api/users')
            .then((response) => {
                this.users = response.data.data;
            })
            .catch(function(error) {
                alert('noviva');
                console.log(error);
            });
        },
        loadRooms: function() {
            axios.get('api/rooms')
            .then((response) => {
                this.rooms = response.data.data;
            })
            .catch(function(error) {
                alert('noviva');
                console.log(error);
            });
        },
        insertMeeting: function() {
            alert(this.room);
        }
    }
}

In the insert, I need to get the id of the room but I don't know how to do that. The function insertMeeting should alert that id. By the way, in that alert appears only the option value (room.name) but I am interested in the option key (room.id). Can help?

We can't reproduce what you see. What does axios.get('api/rooms') resolves to? — Nino Filiu
– Nino Filiu, Commented Dec 21, 2020 at 20:49

marsnebulasoup · Accepted Answer · 2020-12-21 21:20:50Z

2

Bind the option's value to its room's id, which will be stored in the room property bound to its parent, select, via v-modal:

<select v-model="room" class="form-control" id="room">
  <option v-for="room in rooms" :value="room.id" :key="room.id">
    {{ room.name }}
  </option>
</select>

Demo here

edited Dec 21, 2020 at 21:20

marsnebulasoup

2,7003 gold badges20 silver badges40 bronze badges

answered Dec 21, 2020 at 20:58

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get option key from a select using Vue.js with Laravel

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related