Currently, I am delving into learning Vue 3 with the composition API, but I have encountered some roadblocks. Specifically, I am working on a parent page that looks like this:
<template>
<q-page class="flex flex-center bg-dark row">
<q-input
filled
v-model="customerModel"
@change="setCustomer"
dark
/>
<RegistartionForm />
</q-page>
</template>
<script>
import RegistartionForm from "components/RegisterComponent.vue";
import { ref } from "vue";
export default {
components: {
RegistartionForm,
},
setup() {
const customerModel = ref("");
return {
customerModel,
onSubmit() {
console.log(customerModel.value);
},
};
},
};
</script>
Within my Vue component, which looks like this:
<template>
<q-card
class="q-pa-md sc-logon-card bg-dark col-lg-4 col-sm-12"
align="center"
>
<q-input filled v-model="customerComponentModel" dark />
<q-btn
type="submit"
@click="onSubmit"
/>
</q-card>
</template>
<script>
import { ref } from "vue";
export default {
name: "RegistartionForm",
props: {},
setup(props) {
const customerComponentModel = ref("");
return {
customerComponentModel,
onSubmit() {
console.log(customerComponentModel.value);
},
};
},
};
</script>
I am struggling to figure out how to bind the inputs for customerModel and customerComponentModel. Essentially, any changes made to the customerModel input should also affect the customerComponentModel input, and vice versa. Additionally, I need to implement submit logic in the component.
Thank you in advance for your assistance!