Within my code, there is a child component:
<template>
<label :class="className + ' ctrl'">
<span><LocCtrl :page="pageName" :locKey="labelLoc" /></span>
<input
type="text"
:placeholder="getLoc(placeHolderLoc)"
:value="text"
/>
</label>
</template>
<script lang="ts">
import { ref, defineComponent} from "vue";
import { useModelWrapper } from '../utils/modelWrapper';
import LocCtrl from "../components/LocCtrl.vue";
import Locale from "@/services/Locale";
export default defineComponent({
name: "Claims3View",
components: {
LocCtrl
},
setup(props, {emit}) {
const data = ref({
textValue: ""
});
return {
text: useModelWrapper(props, emit, "modelValue")
};
},
methods: {
getLoc(locKey: string): string {
return Locale.getItem(this.pageName, locKey);
}
},
props: {
labelLoc: {
type: String,
required: true,
},
modelValue: {
type: String,
required: true,
},
placeHolderLoc: {
type: String,
required: true,
},
pageName: {
type: String,
required: true,
},
className: {
type: String,
required: true,
},
},
});
</script>
Additionally, there is a parent control in the code:
<template>
<textBox
labelLoc="Symptoms"
className="w4"
data="claim.petCondition"
:modelValue="claim.petCondition.symptoms"
placeHolderLoc="saDC"
pageName="claims3View"
/>
</div>
</template>
<script lang="ts">
import { ref, defineComponent, inject } from "vue";
import type { Claim } from "../types/types";
import TextBox from "../components/TextBox.vue";
export default defineComponent({
name: "Claims3View",
components: {
TextBox,
},
setup() {
const claim = inject("ClaimData") as Claim;
return {
claim,
};
},
});
</script>
The functionality of the code successfully populates the value from Claim into the input field of the control. However, it does not update the data in the opposite direction when the user enters text into the textbox. This needs to be addressed to enable validation methods and other functionalities. One of the difficulties stems from the usage of code from a resource that I am still trying to fully comprehend (https://developpaper.com/vue-3-with-the-development-of-data-events-are-more-and-more-outstanding/).
Another challenge is that many Vue3 examples are not in TypeScript and do not function correctly when the JavaScript code is directly copied.
Additionally, I neglected to include the helper class:
import { computed } from "vue";
export function useModelWrapper(
props: { [x: string]: any },
emit: (arg0: string, arg1: any) => void,
name = "modelValue"
) {
return computed({
get: () => props[name],
set: (value) => emit("update:${name}", value),
});
}