React Form - Update Form Data Using the API

If you need to update form data at runtime, use two-way binding to bind the formData property to a component property. Swapping the whole formData object rerenders the UI component from scratch; updating specific formData fields rerenders only the corresponding editors.

App.vue
  • <template>
  • <div>
  • <DxForm :form-data="employee" />
  • <DxButton
  • text="Update the Phone Number"
  • @click="updatePhone" />
  • </div>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxForm } from 'devextreme-vue/form';
  • import { DxButton } from 'devextreme-vue/button';
  •  
  • const employee = {
  • firstName: 'John',
  • lastName: 'Heart',
  • phone: '+1(213) 555-9392'
  • };
  •  
  • export default {
  • components: {
  • DxForm, DxButton
  • },
  • data() {
  • return {
  • employee
  • };
  • },
  • methods: {
  • updatePhone(e) {
  • this.employee.phone = '+1(333) 888-7698';
  • }
  • }
  • };
  • </script>
See Also