How to get values from FormControl components of frappe ui using in vuejs?

Question

when i try to use frappe ui components in vujs project i got some errors. i have a Dialog component containing TextEditor,FormControl components of type text,date,select

<Dialog v-model="showTicketDialog" 
  :options="{
  
  actions: [
    {
      label: 'Save',
      variant: 'solid',
      onClick: async () => {
        const payload = {
          title: titleValue.value,
          category: categoryValue.value,
          purchase_date: dateValue.value,
          description: descriptionValue.value,
          // description: newTicket.value.description
        };
        console.log('payload',payload)
       
       
        try {
          await ticketList.insert.submit(payload);
          console.log('Ticket saved successfully');
          ticketList.reload(); // Refresh the list view
          showTicketDialog.value = false; // Close the dialog
          clearForm(); // Reset the form
        } catch (error) {
          console.error('Error saving ticket:', error);
        }
      }
      // onClick: 
      // ()=>{
      //   console.log('Save clicked ')
      // }
    }
  ]
}">
  <template #body-title>
    Create New Ticket
  </template>
  <template #body-content>
    <div class="p-2">
      <FormControl
        :type="'text'"
        :ref_for="true"
        size="sm"
        variant="subtle"
        placeholder="title"
        :disabled="false"
        label="Title"
        v-model="titleValue"
      />
    </div>
    

      <div class="p-2">
        <FormControl
          type="select"
          :options="categoryOptions"
          :ref_for="true"
          
          size="sm"
          variant="subtle"
         
          :disabled="false"
          label="Category"
          v-model="categoryValue"
        />
      </div>
      <div class="p-2 mt-5">
        <FormControl
          :type="'date'"
          :ref_for="true"
          size="sm"
          variant="subtle"
          placeholder="Placeholder"
          :disabled="false"
          label="Purchase Date"
          v-model="dateValue"
        />
      </div>
     
      <div class="p-2 mt-5">    
         <p class="text-gray-600 text-sm  pb-2">Description</p>     
      <TextEditor
          ref="editor"
          :fixedMenu="true"
          v-model="descriptionValue"
          editor-class="prose-sm min-h-[4rem] border rounded-b-lg border-t-0 p-2"
          placeholder="Describe your problem..."
          @change="handleDescriptionChange"
          
      />
      </div>
      

  </template>
</Dialog>

when i click on the save in Dialog i got the following in console

Content.vue:25 payload {title: undefined, category: undefined, purchase_date: undefined, description: undefined}

Please provide more information about what you are trying to achieve and what is your question - so the community can help you. — oleracea
– oleracea, Commented Sep 20 at 22:52

oleracea · Accepted Answer · 2025-09-22 22:09:02Z

2

The variables you are using for you v-models seem to be not defined anywhere, thats why you are getting all these "undefined" results.

In your <script setup> you can define them like this:

const titleValue = ref('')
const categoryValue = ref('')
const dateValue = ref('')
const descriptionValue = ref('')

answered Sep 22 at 22:09

oleracea

4510 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nav · Accepted Answer · 2025-11-10 21:46:08Z

That's easy for the reference you can check frappe-file-uploader

/*
       You can also pass the variable when initializing your app using the `createApp` method of Vue.js.
*/
import { createApp } from "vue";
import YourViewComponent from "./src/your-vue-component-file.vue";

/* Now, you can create an app using your view component and pass the “FrappeForm Ui” to use it in the Vue template.
*/

let app = createApp(YourViewComponent, {
    cur_frm
});

/*
    Now, in your vue component (YourViewComponent), define the props as follows:
*/
<script setup>

const props = defineProps({
  cur_frm: {
    default: null,
  }
});

/*
You can now access the cur_frm using props.cur_frm notation.  
*/

props.cur_frm.set_value()
props.cur_frm.get_value()

// I will suggest you explore the file uploader functionality of the Frappe framework to gain a deeper understanding of it.
</script>

Collectives™ on Stack Overflow

How to get values from FormControl components of frappe ui using in vuejs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related