如何将表单提交到数组并清除vue中的输入

Question

我在对话框中有一个 vue 表单。用户可以 select 日期和乘以开始时间和结束时间。到目前为止，我可以保存一个由一个日期和多个时间组成的对象。但是当我想添加另一个对象时，它会采用新日期但会更改每个对象的时间值。

例如，如果我先添加一个对象，日期为 05.09.2021 start:15:00，结束：16:00，然后添加另一个对象，日期为：06.09.2021，开始：16:00，结束：17:00。开始和结束更改为所有对象的最新值，但我希望它们中的每一个都是单独的。我尝试提交一个表单，但遗憾的是我无法使其工作，因为它正在重新加载我不想要的页面，如果我在提交时使用 .prevent 我的错误随时间变化仍然存在。有人可以看看我的代码并指出我的错误吗？

HTML:

        <v-row>

          <v-col cols="12" sm="12">

                   <v-menu
                    ref="menu3"
                    v-model="menu3"
                    :close-on-content-click="false"
                    :return-value.sync="dates"
                    transition="scale-transition"
                    offset-y
                    min-width="auto"
              >
              <template v-slot:activator="{ on, attrs }" >
                <v-text-field
                  v-model="dates"
                  label="Picker in menu"
                  prepend-icon="mdi-calendar"
                  readonly
                  v-bind="attrs"
                  v-on="on"
                ></v-text-field>
              </template>
              <v-date-picker
                v-model="dates"
                no-title
                scrollable
              >
                <v-spacer/>
                <v-btn
                  text
                  color="primary"
                  @click="menu3 = false"
                >
                  Cancel
                </v-btn>
                <v-btn
                  text
                  color="primary"
                  @click="$refs.menu3.save(dates) "
                  v-on:click=" menu3 = false"
                >
                  OK
                </v-btn>
              </v-date-picker>
            </v-menu>
            <v-btn v-on:click="addTimeFields()">Add Time</v-btn>
          </v-col>

        </v-row>
        <v-row v-for="(find, index) in selectedTime" >
          <v-col
            cols="6"
            sm="6">
            <v-text-field
              v-model="find.startTime"
              label="Starttime"
              type="time"
            ></v-text-field>
          </v-col>
          <v-col
            cols="6"
            sm="6">
            <v-text-field
              v-model="find.endTime"
              label="Untiltime"
              type="time"></v-text-field>
          </v-col>
        </v-row>
        </form>

Javascript:

<script>
import MeetingsTableComponent from "@/components/MeetingsTableComponent";
import DatePickerComponent from "@/components/DatePickerComponent";

export default {
  name: "NextMeetingCardComponent",

  data: () => ({
    selectedTime: [],
    dates: new Date().toISOString().substr(0,10),
    datesFinal: [],
    dialog: false,
    menu: false,
    modal: false,
    menu2: false,
    menu3: false
  }),

  methods:{

    addTimeFields(){

      this.selectedTime.push({
        startTime:"",
        endTime: "",
      })
    },

    saveDateAndTIme(e){
      this.datesFinal.push({
        date: this.dates,
        times : [this.selectedTime]
        }

      )
      this.$refs.form.submit()
    },

    clearArrays(){
      while (this.selectedTime.length){
        this.selectedTime.pop()
      }
    }
  }

};
</script>

我尝试清除 selectedTimes 数组，该数组在推送后被推送到 datesFinal，但随后每个值都被删除。

Answer 1

我认为 saveDateAndTIme() 中有一个错误：times 包含 this.selectedTime 数组的嵌套数组，但应该是未嵌套的（即，将 times 设置为this.selectedTime 本身）。

将 this.selectedTime 推入 datesFinal 后，您可以通过将 this.selectedTime 设置为空数组来清除表单。

export default {
  methods: {
    saveDateAndTIme(e) {
      this.datesFinal.push({
        date: this.dates,
        times: this.selectedTime, 
      })
      this.selectedTime = [] 
    },
  }
}

demo

如何将表单提交到数组并清除vue中的输入

How to submit form to array and clear inputs in vue

javascript

typescript

vue.js

vuetify.js