使用 Nuxt/Vue 或使用普通 JavaScript 将数据提交到多个文本输入后生成自定义唯一名称

Question

我正在创建一个应用程序，用户将在其中注册一个程序包，然后它将进行投票 session。投票完成后，它将分配给其他人。（只是一个简单的senario来解释）

现在我希望选票 session/box 附有自定义的唯一选票 ID。

假设我有一个名为 Keyboard 的包裹，分配代码为 KBD01。它将在session号5选票内，在2号选票箱内。

它将有 3 种不同的文本输入，用户将fill-in输入：

文本输入1：5
文本输入 2：2
文本输入3：KBD01

它将生成下面唯一的投票箱名称，点击文本输入 4 时，将显示

5-2-KBD01

我会把它保存到 firestore firebase。之后，我将使用该自定义 ID 进行投票 session 作为参考，以了解我们正在投票的包裹。

如何使用 Vuetify Nuxt/Vue 甚至仅使用普通的 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.
    }
}

Answer 1

如果我理解正确的话：

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>

使用 Nuxt/Vue 或使用普通 JavaScript 将数据提交到多个文本输入后生成自定义唯一名称

Generate custom unique name after submit data to several text inputs with Nuxt/Vue or using plain JavaScript

javascript

vue.js

nuxt.js