0

Using the Vuetify v-pagination we get a bunch of buttons

<form action="">
  <div class="text-xs-center">
    <v-text-field label="Insert text and press enter"></v-text-field><br />
    <v-pagination
      v-model="page"
      :length="6"
    ></v-pagination>
  </div>
</form>

Our problem is, that we have to wrap everything in a form. But the v-pagination is output as <button> instead of <button type="button">. This means pressing Enter while typing in the field, reloads the page.

Is there any way to change this or prevent the submit? Or to tell Vuetify to use type="button"?

I'd also like to avoid submit-handlers, preventDefaults or changing the button-type after load.

Link to Codepen demo

elveti
  • 2,316
  • 4
  • 20
  • 27
  • See answers there in duplicate e.g. `
    `. Or you don't want to prevent it? Perhaps I misunderstood something?
     – Traxo Sep 14 '18 at 10:14
  • Why do you "have to wrap everything in a form." For Vue the `
    ` element is definitely not necessary. Or similarly do you absolutely need the pagination inside the form?
     – skribe Sep 14 '18 at 10:32
  • @Traxo Thanks, I'd seen the question, but missed the submit.prevent, I thought the only solution was to add prevents on the inputs (which I didn't want). This solved it, thanks! I'll close this question and upvote the other question. – elveti Sep 14 '18 at 11:16
  • @skribe we use v-form for validation, that's why we need the form-wrap. – elveti Sep 14 '18 at 11:17

0 Answers0