Форма автоматически отправляется при открытии страницы


Форма автоматически отправляется при открытии страницы

05.01.2020 08:06:35 Просмотров 73 Источник

У меня есть форма на посадочной странице. И посылать парамы к actionsvuex с этим. Он работает, когда я нажимаю кнопку 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;
    },
}

Кроме того, он отправляет параметры, когда я обновляю страницу или вхожу на страницу(Я этого не хочу). Но это не отправит меня на следующую страницу? Я не очень уверен, почему это представление параметров авто?

У вопроса есть решение - Посмотреть?

Ответы - Форма автоматически отправляется при открытии страницы / Form is automatically submitting when page is open

Является ответом!
Dave Pastor

05.01.2020 08:14:43

Я думаю, что проблема здесь

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

Созданный крюк можно использовать для запуска кода после создания экземпляра, поэтому всякий раз, когда вы перезагружаете страницу, создается компонент, и он запускает это действие из хранилища. Проверьте это https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram для получения дополнительной информации.

Надеюсь, это поможет!

Помочь в развитии проекта:
Закрыть X