在使用Nuxt/Vue或使用純JavaScript將資料提交到多個文本輸入后生成自定義唯一名稱

我正在創建一個應用程式，用戶將在其中注冊一個包，然后它將進入投票環節。投票完成后，它將分配給其他人。（只是一個簡單的場景來解釋）

現在我希望該選票會話/框附加有自定義的唯一選票 ID。

假設我有一個Keyboard使用指定代碼呼叫的包KBD01。它將在投票期間編號5，在一個投票箱編號2。

它將有 3 個不同的文本輸入，用戶將填寫輸入：

1. 文本輸入1： 5

2. 文字輸入2： 2

3. 文本輸入3： KBD01

它將為投票箱生成以下唯一名稱，并在單擊文本輸入 4 時，它將顯示

5-2-KBD01

我會將它保存到 firestore firebase 中。之后，我將使用該自定義 ID 進行投票會話作為參考，以了解我們正在投票的包。

我如何使用 Vuetify 或什至只使用普通的 JavaScript 來使用 Nuxt/Vue 做到這一點？

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

uj5u.com熱心網友回復：

如果我理解正確的話：

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>

標籤：javascript Vue.js nuxt.js

上一篇：串列渲染組件時，嵌套組件資料不會更新

下一篇：Nuxtjs側邊欄路由