[Solved] Unexpected page refresh at first form submit



  • Hi all

    I am using the following form:

                        <form>
                          <div class="row">
                              <div class="column ">
                                <q-input
                                  ref='noOfTopGamesField'
                                  label='# of Top Games'
                                  type="number"
                                  outlined
                                  dense
                                  dark
                                  color="accent"
                                  bg-color="secondary"
                                  v-model="noOfTopGames"
                                  style="width:100px"
                                  error-message="Please enter a value between 1 and 100."
                                  :error="!isNoOfTopGamesValid"
                                />
                              </div>
                              <div class="column q-ma-xs">
                                <div class="row q-ml-md">
                                  <q-btn
                                    @click="runQueryTopGames"
                                    type="submit"
                                    unelevated
                                    color='positive'
                                    icon="refresh"
                                    size='sm'
                                    />
                                </div>
                              </div>
                          </div>
                        </form>
    

    and clicking on the submit button triggers the following code:

        runQueryTopGames: async function () {
          if (this.$refs.noOfTopGamesField.error === false) {
            this.topGames = []
            try {
              this.topGames = await twLib.getTopGamesInfo(this.noOfTopGames)
            } catch (error) {
              this.$root.$emit('userNotify', 'No Data Found', "There don't seem to be any top games.", 'error')
              console.log('error: ' + error)
            }
          }
        }
    

    I now have the following issue:

    When i start the application and execute the form for the first time, it leads to a refresh of the page. From the second time onwards, it works as expected.

    I have no idea why the refresh is done?

    anyone?

    Best
    Michael



  • @mboeni Maybe you could try with a @submit.prevent in your form tag.
    Without it, button will submit the form to the current URL (classic form behavior in browser)
    You can also remove your @click event on q-btn, and add it to @submit.prevent



  • @tof06 Yep, that solved it! I added the submit.prevent directive and removed the @click. Thanks!


Log in to reply