Im working on a voting app with Vue and Firebase. So far you can add new dates to the Firebase Realtime Database. I want to build a voting system so the users can vote "yes", "no" and "maybe" for every available date.

The realtime db should look something like this:

dates {
date-one {
    day: 12,
    month: 5,
    year: 2022,
    id: "12345678",
    votes: {
        "yes": ["userId1", "userId2"],
        "no": ["userId1", "userId3"],
        "maybe" ["userId2", "userId4"]
    }
}
date-two {...}

Now I want to make a dynamic form where you can select your vote for every date:

<form @submit.prevent="handleSubmit">
        <div v-for="event in events" :key="event.id">
            <label :for="event.name">{{ event.day }}.{{ event.month }}.{{ event.year }}</label>
            <select :name="event.name" type="select" >
                <option value="yes">YES</option>
                <option value="maybe">MAYBE</option>
                <option value="no">NO</option>
            </select>
        </div>
        <button type="submit">Senden</button>
    </form>

My problem is how I can handle the input values so I can push the user id into the respective array (yes, maybe, no) for every date?

Can someone help me or do you have an idea to do this better?

Thank you very much!