时间戳

首页 > 解决方案 > 页面打开时表单自动提交

javascript - 页面打开时表单自动提交

问题描述

我在登陆页面上有一个表格。并将参数发送到 vuex actions。当我单击submit按钮时它会起作用，并按应有的方式向我推送下一页。但是有一个缺陷。当我打开页面，或者刷新页面时。它正在自动提交参数，我不知道为什么？

模板

<form class="flexbox" @submit.prevent="submit" method="post">
    <keyword-filter />
    <div class="seperator"></div>
    <city-filter />
    <submit-btn />
</form>

脚本

created(){
    this.$store.dispatch("bridalApi", {
        input: this.formItems,
    });
},
methods: {
    submit(){
        this.$store.dispatch("bridalApi", {
            input:this.formItems
        })
        .then(this.$router.push('home'));
    },    
},
computed: {   
    formItems(){
        let paramObj = {
            keyword: this.$store.state.bridal.keyword,
            city: this.$store.state.bridal.city,
            price: this.$store.state.bridal.price,
            people: this.$store.state.bridal.people,
            rank: this.$store.state.bridal.rank,
            sort: this.$store.state.bridal.sort,
        }
        return paramObj;
    },
}

此外，当我刷新页面或进入页面时，它会发送参数（我不想要那个）。但它不会让我进入下一页？我不太确定它为什么要提交参数自动？

标签： javascriptvue.js

解决方案

我认为问题就在这里

 created(){
    this.$store.dispatch("bridalApi", {
        input: this.formItems,
    });
},

created钩子可用于在创建实例后运行代码，因此每当您重新加载页面时，都会创建组件并从商店触发该操作。查看https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram了解更多信息。

希望有帮助！

推荐阅读