首頁  >  問答  >  主體

如何為使用 Vuejs/Nuxtjs 動態建立的日期時間本機類型的輸入欄位設定預設值?

我正在 Vuejs/Nuxtjs 中動態建立一些 datetime-local 類型的輸入欄位。我想將所有這些輸入欄位的預設值設定為 2022-04-21T14:27:27.000。怎麼做?

對於直接字段,我們可以使用 v-model 分配值,但我有點不確定如何為 datetime-local 的所有字段設置預設值。如果我沒記錯的話,Vanilla JavaScript 中有一個選項可以取得某種類型的所有欄位並更改值,有沒有辦法使用 Vuejs/Nuxtjs 來實現相同的目的。

以下是我到目前為止的程式碼:

<template>
  <div>
    <button type="button" @click="addField" class="btn btn-info">
      Add Field
    </button>

    <div v-for="field in fieldArray" :key="field.ID" class="form-group">
      <input
        v-model="field.time"
        type="datetime-local"
        class="form-control"
        step="1"
        value="2022-04-21T14:27:27.000"
        @change="timeChange(field.ID)"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fieldCount: 0,
      fieldArray: [],
    };
  },
  mounted() {
    let now = new Date();
    now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
    now.setSeconds(now.getSeconds(), 0);
    now = now.toISOString().slice(0, -1);
    //I would like to set this "now" time value for all the created fields of input type datetime-local
    console.log("Current Time : " + now);
  },
  methods: {
    //Add field
    addField() {
      const fieldObj = { ID: this.fieldCount, time: "" };
      this.fieldArray.push(fieldObj);
    },
    //Time change
    timeChange(ID) {
      console.log("ID : " + ID);
      console.log(JSON.stringify(this.fieldArray, null, 4));
    },
  },
};
</script>

<style>
</style>

我想要做的就是為我的元件中的所有 datetime-local 欄位設定預設時間。有什麼辦法可以做到嗎?我可以對單一欄位實現此目的,但不能對動態建立的欄位實現此目的。

P粉156983446P粉156983446189 天前423

全部回覆(1)我來回復

  • P粉138871485

    P粉1388714852024-04-01 11:06:18

    類似這樣的嗎?

    
    
    sssccc
    
    

    回覆
    0
  • 取消回覆