如何在vue中清除模态表单内的值答案

【问题标题】：How to clear values inside modal form in vue如何在vue中清除模态表单内的值
【发布时间】：2021-09-11 22:08:15
【问题描述】：

我有一个带有小表单的模式（选择并列出多选）。我可以保存我的价值观。但是在保存后我想关闭模式并在关闭时清除每个表单字段，在这种情况下我的列表选择和选择框值，现在它们仍然是我在关闭之前选择的第一个值。有人可以指点我怎么做吗？

我想把所有东西都放在一个表单标签中，也许试图从他们那里实现它，但不知道这是否是正确的方法。这些是我要清除的选择。绑定的数组我已经可以清除了。但不是列表中的选择

html:

 <v-row>
        <v-col cols="4" >
          <v-select
              :items="availableTimes"
              item-text="date"
              @select="filterByDate"
              v-model="selectedDate"
          ></v-select>
        </v-col>
        <v-col cols="8">
          <v-chip-group
              v-model="selection"
              active-class="deep-purple--text text--accent-4">
            <v-chip
                v-for="(time, i) in dateTimeArray"
                :key="time.id"
                :value="time"
                v-on:click="getTimeValue(times)"
                @click="getTimesFiltered(time)">
              {{ time.startTime +" - "+ time.endTime }}
            </v-chip>
          </v-chip-group>
        </v-col>
      </v-row>
      <v-row>
      <v-col cols="4">
        <v-card>
        <v-list>
        <v-list-item-group
            v-model="model"
            multiple
            color="blue"
        >
          <v-list-item
              v-for="(item, i) in voterArrayFilteredByTime"
              :key="item.id"
              :value="item">
            <v-list-item-content>
              <v-list-item-title v-text="item.voterUniqueName"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>

        </v-card>

【问题讨论】：

为什么不能只将v-models 设置为初始值（或null）？

标签： javascript typescript vue.js vuetify.js

【解决方案1】：

如果你显示你的脚本标签会很有帮助。

没有看到您要做什么，我的建议是在您的方法中使用重置您的“选择”变量。例如，如果您有一个关闭按钮

<v-btn @click="resetStuff" >Close me<v-btn>

然后在你的方法中：

  methods: {
    // your method
    resetStuff() {
    this.selection = null
    //.. some more variables to reset 

  }

【讨论】：