Hi @ldebeasi
Thanks for the rapid reply. I tried to implement the way it is given in the documentation, I have written a component something like:
<template>
<a-form>
<a-form-item label="Name of the Category" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" size="large" />
</a-form-item>
<a-form-item class="button-row">
<a-button class="full-width" size="large" @click="onSubmit">
Save Category
</a-button>
</a-form-item>
</a-form>
</template>
<script>
import { reactive, toRaw, defineComponent } from 'vue'
import { useForm } from '@ant-design-vue/use'
import { toastController } from '@ionic/core'
import { useRouter } from 'vue-router'
export default defineComponent({
name: 'CreateCategoryForm',
props: {
editMode: {
type: Boolean,
required: true,
},
category: {
type: Object,
required: false,
default: null,
},
},
setup(props, { emit }) {
const router = useRouter()
const modelRef = reactive({ name: '' })
const rulesRef = reactive({
name: [
{
required: true,
message: 'Please input the Name of the Expense Category',
},
],
})
const { validate, validateInfos, resetFields } = useForm(
modelRef,
rulesRef,
)
const onSubmit = async (e) => {
e.preventDefault()
try {
await validate()
await emit('onSubmit', toRaw(modelRef))
const toast = await toastController.create({
message: `Category ${modelRef.name} successfully created!`,
position: 'bottom',
duration: 4000,
buttons: [
{
text: 'Done',
role: 'cancel',
},
],
animated: true,
color: 'primary',
})
await toast.present()
await router.push('/categories')
} catch (err) {
console.log(err)
}
}
return {
modelRef,
validate,
validateInfos,
resetFields,
onSubmit,
}
},
ionViewDidEnter() {
if (this.editMode) {
debugger
this.modelRef.name = this.category.name
}
},
ionViewWillLeave() {
this.resetFields()
},
})
</script>
<style scoped></style>
I the above example, I have debugger in the ionViewDidEnter
function, but no matter what I do, navigate to the different route and come back, refresh the page, the debugger is not executed (meaning the function is not being called).
Please find below my ionic setup info for your reference:
Ionic:
Ionic CLI : 6.12.3 (/home/noopurp123/.nvm/versions/node/v12.19.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 5.5.2
Capacitor:
Capacitor CLI : 2.4.4
@capacitor/core : 2.4.4
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v12.19.1 (/home/noopurp123/.nvm/versions/node/v12.19.1/bin/node)
npm : 6.14.8
OS : Linux 5.4
Please let me know if I am missing something…