Vue JS: Get Dropdown Value On Checked Table Row

I am new to VueJS, and I know Vue JS directly to version 3 and still learning.

So this is my case, I have a table view filled with list of User. The function of this view is to add user to another table. The condition is, before submit you have to check the box first and then select the dropdown option on each row that you want to add. And then on submit, my expected output is one row have multiple value (the value of checkbox and the dropdown).

This is my HTML table:

<tbody>
    <tr v-for="user in allusers">
        <td>
            <div class="form-check form-check-sm form-check-custom form-check-solid">
                <input v-model="selectedUser" @change="selectEvent" class="form-check-input widget-9-check" :value="user.ID_user" type="checkbox" />
            </div>
        </td>
        <td>
            <div class="d-flex align-items-center">
                <!-- <div class="symbol symbol-45px me-5">
                    <img src="media/avatars/300-14.jpg" alt="" />
                </div> -->
                <div class="d-flex justify-content-start flex-column">
                    <a href="#" class="text-dark fw-bold text-hover-primary fs-6">{{ user.full_name }}</a>
                    <span class="text-muted fw-semibold text-muted d-block fs-7">{{ user.email }}</span>
                </div>
            </div>
        </td>
        <td>
            <a href="#" class="text-gray-600 text-hover-primary d-block fs-6">{{ user.city }}</a>
        </td>
        <td>
            <select v-model="{{ this is my question, what to fill }}" class="form-select" aria-label="Select Level">
                <option value="">Set Level</option>
                <option v-for="level in levels" :value="level.ID_competition">{{ level.level }}</option>
            </select>
        </td>
    </tr>
    
</tbody>

And this is my Script:

<script>
    import useAccount from '../composable/account';
    import { reactive } from 'vue';
    import useGames from '../composable/game';

    export default {
        props: {
            allusers: {
                type: Array
            },
            levels: []
        },
        setup() {
            const selectedUser = ref([]) // this is the content I imported from useGames method
            const { setContestant, selectedUser } = useGames()
            
            var event_id = window.location.href.split('/').pop();
            const submit = async () => {
                console.log(selectedUser)
                // setContestant(event_id, {...form})
            }

            return {
                submit,
                selectedUser
            }
        },
        methods: {
            selectEvent() {
                console.log(this.selectedUser)
            },
        },
    }
</script>

My Expected return would be something like this:

[
  0: {
       id: 22, // user id from checked checkbox
       level: 'get value from dropdown'
     },
  1: {
       id: 23,
       level: 'get value from dropdown'
     },
]

If I only did set v-model on selectedUser, the user ID inside the checkbox already get each ID. But I need another information on that row, which is the dropdown part.

How can I achieve that? Appreciate the help

Vue JS: Get Dropdown Value On Checked Table Row

0 Answers