I'm creating an app where user will register a package, and it will go to a ballot session. After ballot is completed, it will assign it to someone else. (Just a simple senario to explain )
Now I want that Ballot session/box to have custom unique Ballot ID attached to it.
Let say I have a package called Keyboard with assigned code KBD01.
It will be in the ballot session No. 5, inside a ballot box No. 2.
It will have 3 differents text input, User will fill-in in the input:
text input 1: 5
text input 2: 2
text input 3: KBD01
it will generate below unique name for the ballot box and on clicking the text input 4, it will display
5-2-KBD01
and I will save it to firestore firebase. After that I will do ballot session with that custom id as a reference to know what package that we are balloting.
How can I do this with Nuxt/Vue using Vuetify or even with just a 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() {
// here is the part I don't know how to do it.
}
}
If I understood you correctly:
new Vue({
el: '#demo',
vuetify: new Vuetify(),
data() {
return {
BallotSession: '',
BallotBox: '',
PackageCode: '',
BallotID: '',
BallotSessionItems: [5,6,7]
}
},
methods: {
generateBallotID() {
if (this.BallotSession && this.BallotBox && this.PackageCode) {
this.BallotID = this.BallotSession + '-' + this.BallotBox + '-'+ this.PackageCode
}
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="demo">
<v-app>
<v-main>
<v-container>Hello world
<v-col cols="12" sm="6" md="6">
<label>Assign Ballot Session</label>
<v-select
outlined
v-model="BallotSession"
:items="BallotSessionItems"
@change="generateBallotID"></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"
@blur="generateBallotID"></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>
</v-container>
</v-main>
</v-app>
</div>