Отправить V-форму и показать отправленное сообщение - PullRequest
0 голосов
/ 05 ноября 2019

У меня есть простая форма, подключенная к скрипту листов Google. Я использую vue.js и vuetify, и для формы у меня есть следующее.

    <v-row>
             <v-col>
               <v-form v-model="valid" method = "post"
               class="gform pure-form pure-form-stacked"
               data-email="example@email.net"
               action="https://script.google.com/macros/s/.../exec"
               id = "nativeForm"
               target="_blank">
        <v-container>
          <v-row align="end" justify="end">
            <v-col
              cols="12"
              md="4"
            >
              <v-text-field
                v-model="name"
                :rules="nameRules"
                :counter="10"
                label="First name"
                required
                name="name"
              ></v-text-field>
            </v-col>
            <v-col
              cols="12"
              md="4"
            >
              <v-text-field
                v-model="email"
                :rules="emailRules"
                label="E-mail"
                required
                name="email"
              ></v-text-field>
            </v-col>

          </v-row>
          <v-row justify="end" align="end">
            <v-col
              cols="12"
              md="4"
              align = "end"
              justify = "end"
            >

                   <v-btn
            color="success"
            class="mr-4"
            v-on:click="submit"
          >
            Submit
          </v-btn>


            </v-col>

          <v-col cols="6">

              <v-textarea
                v-model="message"
                :rules="messageRules"
                counter
                minlength="20"
                maxlength="350"
                label="Message"
                required
                name="message"
              >
              </v-textarea>
            </v-col>

          </v-row>

И сценарий.

<script>
 export default {
    data(){
    return {
    valid: false,
      name: '',
      nameRules: [
        v => !!v || 'Name is required',
        v => v.length <= 10 || 'Name must be less than 10 characters',
      ],
      message: '',
      messageRules: [
        v => !!v || 'Message is required',
        v => v.length >= 10 || 'Message must be more than 10 characters',
      ],
      email: '',
      emailRules: [
        v => !!v || 'E-mail is required',
        v => /.+@.+/.test(v) || 'E-mail must be valid',
      ],
    }},
        methods: {
      submit() {
        nativeForm.submit()
        }
    }
  }
</script>

Однако происходит то, что всякий раз, когда я нажимаю кнопку отправить, он переходит на новую страницу (когда я использую target = _blank) или перенаправляет на страницу, когда я не использую этот код немного выше. Что бы я хотел, это чтобы каждый раз, когда я нажимал на него, он просто отображал наложение с сообщением «Успешно»Но я не могу понять, как это сделать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...