In my new app, users can register packages and then participate in a ballot session where the package will be assigned to someone else. To make this process smoother, I want each ballot session or box to have a unique Ballot ID attached to it.
For example, let's say we have a package named Keyboard with the code KBD01. It is in ballot session No. 5, inside ballot box No. 2.
The user will need to input three different values:
text input 1:
5text input 2:
2text input 3:
KBD01
Based on these inputs, a unique name for the ballot box will be generated. Clicking input 4 will display 5-2-KBD01. This unique ID will be saved to Firestore Firebase for reference during the ballot session.
I'm looking for guidance on how to achieve this using Nuxt/Vue with Vuetify or even just plain JavaScript.
<v-col cols="12" sm="6" md="6">
<label>Assign Ballot Session</label>
<v-select
outlined
v-model="BallotSession"
:items="BallotSessionItems"></v-select>
</v-col>
<v-col cols="12" sm="6" md="6"></v-col>
<v-col cols="12" sm="6" md="6">
<label>Ballot Box No.</label>
<v-text-field
outlined
v-model="BallotBox"></v-text-field>
</v-col>
<v-col>
<label>Package Code</label>
<v-text-field
outlined
v-model="PackageCode"
@blur="generateBallotID"></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="6">
<label>Ballot ID</label>
<v-text-field
outlined
v-model="BallotID"></v-text-field>
</v-col>data: () => ({
BallotSession: '',
BallotBox: '',
PackageCode: '',
BallotID: '',
}),
methods: {
generateBallotID() {
// This is the part where I need assistance to implement the unique ID generation.
}
}