btn-toggle acts as submit when wrapped in v-form

[tehshaz]

Hello, when I wrap the v-form-base in a v-form tag any btn or btn-toggle in for the form acts as a submit and refreshes the page. This prevents me from using a btn-toggle as an option select in a form. It of course works great if you do not use the v-form tag because there is nothing to submit.

Here is an example config.

<template>
  <v-container fluid>
    <v-form>
      <v-form-base
        id="form-base"
        :model="myModel"
        :schema="mySchema"
        @change:form-base="handleChange"
      >
      </v-form-base>
    </v-form>
  </v-container>
</template>

<script>
import VFormBase from 'vuetify-form-base';

const options = ['A', 'B', 'C'];

export default {
  components: { VFormBase },
  data() {
    return {
      myModel: {
        btnToggleSingle: ['B'],
      },
      mySchema: {
        btnToggleSingle: {
          type: 'btn-toggle',
          options,
          multiple: true,
        },
      },
    };
  },
  methods: {
    handleChange() {
      alert('Change');
    },
  },
};
</script>

[wotamann]

Try

<v-form @submit.prevent>

this works for me, but maybe is there a better solution out there!

[tehshaz]

This definitely works, thank you. The issue is then it kills the ability to have both a btn-toggle and submit button. A work around of course, is to build a function for submit manually.

[wotamann]

You can control the submit event in handleSubmit method

<v-form @submit.prevent="handleSubmit">