如何通过 Vue.js 3 的链接和按钮点击提交"隐藏"表单？

我对Vue.js 3还很陌生，我想知道是否有一种方法可以实现我正在尝试使用的Vue.js(但如果没有，我对纯JavaScript持开放态度(。

当点击任何链接/按钮项目时，我希望提交一个包含页面上隐藏字段的表单：；单击此处"；，占位符图像和实际按钮本身。

我希望提交的字段包含在"；在这里访问特定的隐藏输入"；议论此外，我希望在点击这三个链接中的任何一个时打开一个外部链接。因此，在提交时，它将提交隐藏的表单并打开链接。

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Bootstrap core CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
/>
<style></style>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.11"></script>
<script src="https://unpkg.com/vee-validate@next"></script>
</head>
<body class="d-flex flex-column h-100" id="awApp">
<header>
<!-- FIXED NAVBAR AND/OR HEADER -->
<nav class="navbar">
<div class="container">
<a class="navbar-brand">
<img :src="imgSrc" alt="logo" width="200" />
</a>
</div>
</nav>
</header>
<!-- / HEADER/NAVBAR -->
<!-- TOP CONTENT -->
<main role="main" class="flex-shrink-0 aw-index">
<div class="container pt-0">
<div class="row gx-5">
<div class="col-md-7 text-light my-auto"></div>
<div class="col-md-5">
<div class="card shadow aw-index p-3">
<div class="card-body">
<h4 class="card-title aw-orange aw-font-droid">
Download Your Book
</h4>
<form>
<!-- VISIT specific hidden inputs here -->
<input type="hidden" name="z_submit_date" v-model="now" />
<input type="hidden" name="z_utm_source" value="Source" />
<input type="hidden" name="z_utm_medium" value="Medium" />
<input type="hidden" name="z_utm_campaign" value="Campaign" />
<input type="hidden" name="z_utm_content" value="Content" />
<!-- /VISIT specific hidden inputs here -->
<h5 class="card-text aw-orange aw-font-freight-light">
<a class="aw-orange" href="" target="_blank">Click here</a>
to download it now.
</h5>
<div class="row text-center">
<a href="" target="_blank">
<img
class="img-fluid"
src="https://via.placeholder.com/150x200"
/>
</a>
</div>
<div class="row text-center mt-4">
<button
type="submit"
class="
btn
aw-bg-orange
text-dark
aw-font-freight-semibold-regular aw-background-orange
"
value="Submit"
>
<strong>Download</strong>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /TOP CONTENT -->
<!-- FOOTER -->
<footer class="footer mt-auto py-3 bg-secondary"></footer>
<!-- /FOOTER -->
</body>
<!-- BOOTSTRAP JS -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"
></script>
<!-- /BOOTSTRAP JS -->
<!-- VUE APP CODE -->
<script>
const app = Vue.createApp({
data() {
return {
currentYear: new Date().getFullYear(),
now: new Date().toISOString(),
};
},
methods: {
submitForm(e) {},
},
});
app.mount("#awApp");
</script>
<!-- /VUE APP CODE-->
</html>

您可以将click处理程序添加到调用submitForm的链接和按钮中，并更新submitForm以打开下载URL:

向<form>添加模板引用，以便我们稍后可以使用它来创建要提交的FormData，包括隐藏的表单字段：
```
<form ref="form">
```

使用.prevent修饰符在链接和按钮中添加一个click处理程序，以防止默认操作，因为我们将用程序打开下载URL:

<a class="aw-orange" :href="downloadUrl" @click.prevent="submitForm" target="_blank">Click here</a>
<a :href="downloadUrl" @click.prevent="submitForm" target="_blank">
<img
class="img-fluid"
src="https://via.placeholder.com/150x200"
/>
</a>
<button @click.prevent="submitForm">
<strong>Download</strong>
</button>

更新submitForm()以从<form>模板ref创建FormData，使用fetch()提交表单，并使用window.open下载URL:

export default {
methods: {
submitForm() {
const formData = new FormData(this.$refs.form)
fetch(this.submitUrl, { method: 'POST', body: formData })
.then(resp => resp.json())
.then(json => this.response = json)
window.open(this.downloadUrl, '_blank')
}
}
}

演示

相关内容

最新更新

热门标签：