Submit Form from parent component button

Hi , i wanna submit form from parent component button how it is possible in Vue 3 script setup?

This is my parent component

<template>
  <ParentCardLayout>
    <div v-for="menu in menus" :key="menu.menu_name">
      <ParentMenuOptions :menu="menu" />
    </div>
    <template v-if="menus[0].menu_type === 'choices'">
      <Button text="Submit" class="ml-auto w-1/2" type="submit" />
    </template>
  </ParentCardLayout>
</template>

<script setup>
import ParentCardLayout from "@/components/parent/Menus/ParentCardLayout.vue";
import ParentMenuOptions from "@/components/parent/Menus/ParentMenuOptions.vue";
import Button from "@/components/Ui/Button.vue";

defineProps({
  menus: {
    type: Object,
    required: true,
  },
});
</script>

ParentMenuOptions is my child component

<template>
  <template class="flex flex-wrap justify-between">
    <h2
      class="whitespace-wrap mb-2 w-64 overflow-hidden break-words font-semibold text-gray-700"
    >
      {{ `${menu.date} - ${menu.menu_name}` }}
    </h2>
  </template>
  <Form @submit="onSubmit">
    <div v-if="menu.menu_type === 'choices'">
      <template v-for="menu in menu.menu_name" :key="menu">
        <BaseRadio name="choices" :value="menu" />
      </template>
    </div>
    <div v-if="menu.menu_type === 'fixed'">
      <BaseRadio name="fixed" :value="menu.menu_name" />
    </div>
  </Form>
</template>

<script setup>
import BaseRadio from "@/components/Ui/form-components/BaseRadio.vue";
import { Form } from "vee-validate";
import { useMenuManagementStore } from "@/stores/useMenuManagementStore";

const store = useMenuManagementStore();

const props = defineProps({
  menu: {
    type: Object,
    required: true,
  },
});

const onSubmit = function (values) {
  axios
    .post("/api/parent/choice-claims", {
      date: props.menu.date,
      claimable: values,
      claimable_type: props.menu.name,
    })
    .then(() => {
      store.toggleFixedCard = false;
      store.toggleChoicesCard = false;
      store.fixedMenus = [];
      store.choicesMenus = [];
    });
};
</script>

MaverickChan

3 years ago

Best Answer

Level 47

use defineExpose

idea:

parent component

...
<ChildComponent ref="update" />
<button @click="submitfromparent">
		parentSubmit
</button>
...
<script setup>
	import {ref} from 'vue'
	const update = ref()
	const submitfromparent = () => {
			update.value.submitInsideChild()
	}
</script>

child component:

<script setup>
  const submitInsideChild = () => {
			//do submit stuff
}
defineExpose({
		submitInsideChild
})
</script>

2 likes

Please or to participate in this conversation.