Vue Form - Add a Button

You can add a button that performs a custom action using a button item by setting the itemType property to "button". Then, configure the button using the buttonOptions object which can contain any Button UI component property.

App.vue
  • <template>
  • <DxForm
  • :form-data="employee"
  • :col-count="2">
  • <DxSimpleItem data-field="name" />
  • <DxEmptyItem />
  • <DxSimpleItem data-field="email" />
  • <DxButtonItem alignment="left">
  • <DxButtonOptions
  • text="Send an Email"
  • :on-click="buttonClick" />
  • </DxButtonItem>
  • </DxForm>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxForm, DxEmptyItem, DxSimpleItem, DxButtonItem, DxButtonOptions } from 'devextreme-vue/form';
  •  
  • export default {
  • components: {
  • DxForm, DxEmptyItem, DxSimpleItem, DxButtonItem, DxButtonOptions
  • },
  • data() {
  • return {
  • employee: {
  • name: 'John Heart',
  • email: 'jheart@dx-email.com'
  • }
  • }
  • },
  • methods: {
  • buttonClick(e) {
  • // ...
  • }
  • }
  • }
  • </script>

View Demo

See Also