Estoy creando una aplicación donde el usuario registrará un paquete e irá a una sesión de votación. Una vez completada la boleta, se la asignará a otra persona. (Solo un simple senario para explicar)
Ahora quiero que esa sesión/caja de boleta tenga una ID de boleta única y personalizada adjunta.
Digamos que tengo un paquete llamado Keyboard con el código asignado KBD01 . Será en la sesión de votación No. 5 , dentro de una urna No. 2 .
Tendrá 3 entradas de texto diferentes, el usuario completará la entrada:
entrada de texto 1: 5
entrada de texto 2: 2
entrada de texto 3: KBD01
generará un nombre único debajo de la urna y al hacer clic en la entrada de texto 4, se mostrará
5-2-KBD01
y lo guardaré en firestore firebase. Después de eso, haré una sesión de votación con esa identificación personalizada como referencia para saber qué paquete estamos votando.
¿Cómo puedo hacer esto con Nuxt/Vue usando Vuetify o incluso con JavaScript simple?
<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. } }Si te entendí bien:
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>