Vuetify Slider 阻止表单提交

Question

出于某种原因，当我向 Vuetify 表单添加滑块时，在文本输入中按 Enter 键不再提交表单。当我删除滑块时，当我输入文本输入并按回车键时，表单会提交。当我将其添加回来时，在文本输入中按 enter 什么都不做。这是为什么？

<template>
<v-form
  v-model="valid"
  lazy-validation
  v-on:submit.prevent="search"
>
  <v-container>
    <v-row>
      <v-col>
        <v-text-field
          outlined
          v-model="searchString"
          class="pa-5"
          label="Search for submissions, attachments, samples etc."
        ></v-text-field>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <v-slider
          label="Max results"
          class="pa-5"
          v-model="limit"
          max="500"
          min="10"
          step="10"
          ticks="always"
          thumb-label="always"
        ></v-slider>
      </v-col>
    </v-row>
    <v-row>
      <v-col class="text-right">
        <v-btn class="mr-4" color="success" @click="search"
          >Search</v-btn
        >
        <v-btn @click="clear">Clear</v-btn>
      </v-col>
    </v-row>
  </v-container>
</v-form>
</template>
<script>
export default {
  data() {
    return {
      limit: 100,
      searchResults: null,
      searchString: "",
      valid: false,
    };
  },
  methods: {
    search() {
       alert('searching!');
    }
  }
}
</script>

Answer 1

HTML 表单只有在只有一个输入的情况下才会在输入时提交。如果您有多个输入，您还需要一个提交按钮才能实现。您可以将 type="submit" 添加到 v-btn 以将其变成提交按钮。

Vuetify Slider 阻止表单提交

Vuetify Slider is Preventing Form Submission

html

javascript

forms

vuetify.js