In my Vue3 component, I am utilizing the following code snippet:
<v-row
v-for="(target, targetIndex) in targetModules"
:key="targetIndex"
>
<v-autocomplete
v-model="targetModules[targetIndex]['modulName']"
:items="moduleNamesAndEcts.map(module => module.name)"
:rules="rules.text"
label="Module"
item-text="name"
item-value="name"
@input="(newModuleName) => updateEcts(newModuleName, targetIndex)"
/>
</v-row>
The function implemented is as follows:
const updateEcts = (newModuleName, targetIndex) => {
console.log("HELLO!")
const module = moduleNamesAndEcts.value.find(module => module.name === newModuleName);
console.log(module.ects)
if (module) {
targetModules[targetIndex]['creditPoints'] = module.ects;
}
}
Strangely, it appears that updateEcts is not being called. The console.log statements are not executed. Even using @change didn't resolve this issue. What could be causing this problem?