Features

Form layout has some useful features properties which they explained below.

Save and Forward

It is recommended to use VaSaveButton as the default save button. This button will automatically synchronize with the main form and form state data when saving to the API.

<template>
  <va-form :id="id" :item="item" redirect="show">
    <!-- Olobase Admin inputs component -->
    <va-save-button></va-save-button>
  </va-form>
</template>

<script>
export default {
  props: ["id", "title", "item"],
};
</script>

A successful save will redirect to the resource list page by default unless you set an explicit redirect to VaForm as above. Note that this support is only effective for the save button. You can also set redirection via VaSaveButton.

The following example may be useful when you need multiple redirects:

<template>
  <va-form :id="id" :item="item">
    <!-- Olobase Admin inputs component -->
    <va-save-button class="mr-2"></va-save-button>
    <va-save-button
      text
      redirect="create"
      color="secondary"
    ></va-save-button>
  </va-form>
</template>

<script>
export default {
  props: ["id", "title", "item"],
};
</script>

As you can see, the code above creates two different buttons. The default one triggers the current save behavior while the other button triggers the save and redirect to list action.

Disabling Default Redirect

Use the disable-redirect feature in VaForm to prevent the default send redirect. This action has no effect on guided save buttons.

<template>
  <va-form 
    :id="id" 
    :item="item" 
    disable-redirect 
    v-model="model"
  >
 </va-form>
</template>

Disabling Snackbar Message

You can use the disable-save-message feature in VaForm to prevent the default snackbar message.

<template>
  <va-form 
    :id="id" 
    :item="item" 
    disable-redirect 
    disable-save-message
    v-model="model"
  >
 </va-form>
</template>