[Solved] Unexpected page refresh at first form submit

[mboeni]

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

[tof06]

@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

[mboeni]

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