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>
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.