Pass props from parent to child using a method

Question

I am working on an app in which the user have to select from four dropdowns and once the user clicks ok button I want to send all the selection to a child component to create a chart. I had it working without the button click as I was passing the selection as a prop and making the computation in the child component like thid

<ChildComponent :name="name" :email="email" :date="date" ></ChildComponent>

Now I need to have a button that when clicked will do the same and update the props and send them to the child component.

Answer 1

You would just create a method that updates the value of the props that you are passing into the child

<script setup>
const name = ref('')
const email = ref('')
const date = ref('')

function handleUpdate() {
  name.value = /* ... */
  email.value = /* ... */
  date.value = /* ... */
}
</script>

<template>
  <ChildComponent :name="name" :email="email" :date="date" />
  <button @click="handleUpdate">OK</button>
</template>

It's a bit hard to see what you mean but are you sure you can't use a form here to group the values together if you have 4 selects?