Vue + Vuetify 使用 GET 方法提交表单传递空值答案

【问题标题】：Vue + Vuetify submitting form with GET method passes empty valuesVue + Vuetify 使用 GET 方法提交表单传递空值
【发布时间】：2020-03-27 01:46:39
【问题描述】：

我的代码有问题。提交表单时，我找不到 GET 参数为空的原因。

我想要实现的是在验证后提交表单并重定向到http://someurl.com/?service=3&propert_type=2。甚至可能吗？还是我需要对其进行字符串化，然后使用 window.location？

我是 Vue 的新手，但在互联网上找不到解决方案，所以我想这与我的代码有关。

<template>
    <ValidationObserver v-slot="{ valid }" ref="getanoffer">
        <v-form
            class="form form--getanoffer"
            ref="form"
        >
            <ValidationProvider
                rules="required"
                v-slot="{ errors }"
                name="service"
            >
                <v-select
                    v-model="service"
                    name="service"
                    :items="services"
                    placeholder="Select Service"
                    :error-messages="errors"
                    solo
                ></v-select>
            </ValidationProvider>

            <ValidationProvider
                rules="required"
                v-slot="{ errors }"
                name="property_type"
            >
                <v-select
                    v-model="property_type"
                    :items="property_types"
                    name="property_types"
                    item-text="name"
                    item-value="id"
                    placeholder="Select Property Type"
                    :error-messages="errors"
                    solo
                ></v-select>
            </ValidationProvider>

            <v-btn
                color="primary"
                width="100%"
                @click="validate"
                class="v-btn--submit v-btn--no-gutter"
                :loading="loading"
                :disabled=" ! valid"
            >
                Continue
            </v-btn>
        </v-form>
    </ValidationObserver>
</template>

<script>
  import {ValidationProvider, ValidationObserver} from "vee-validate";

  export default {
    components: {
      ValidationProvider,
      ValidationObserver,
    },
    data() {
      return {
        service: null,
        property_type: null,
        form: {

        },
        loading: false,
      }
    },
    props: {
      services: {
        type: Array,
      },
      property_types: {
        type: Array,
      }
    },
    methods: {
      async validate() {
        let form = await this.$refs.getanoffer.validate();

        if (form) {
          this.loading = true;
          this.submit();
          this.$refs.form.$el.submit();
        }
      },

      submit() {

      }
    }
  }
</script>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

让我们简化您的代码

您可以在按钮上添加type="submit"，而不是在按钮单击时调用validate()，并在表单中添加@submit:prevent="validate"。这并不能解决问题，但允许您使用 Enter 提交，并且每个提交按钮都会触发验证。

现在解决方法

1- 要导航到外部范围，您可以使用 windows.open()。 Vuetify 允许您导航到一个 url，但您必须将 href 放在按钮上并手动控制它

windows.open('http://someurl.com/')

CodePen

Vuetify vee-validate docs

Javacript 标准说你应该对 js 变量使用 camelCase (this.propertyType)

JS standard

ESlint Rules

【讨论】：