У меня есть простая форма, подключенная к скрипту листов 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
) или перенаправляет на страницу, когда я не использую этот код немного выше. Что бы я хотел, это чтобы каждый раз, когда я нажимал на него, он просто отображал наложение с сообщением «Успешно»Но я не могу понять, как это сделать.