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}

• oleracea: Please provide more information about what you are trying to achieve and what is your question - so the community can help you.

Answer 1

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('')

Answer 2

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>