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:

1. text input 1: 5

2. text input 2: 2

3. 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.
    }
}

CodePudding user response：

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/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>