Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Vue3 @input function not getting called on autocomplete text input field

I have this code snippet in a Vue3 component:

<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 is:

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;
        }
    }

For some reason, updateEcts doesn’t seem to get called. The console.log doesn’t get printed. @change also didn’t work. Why is that?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    It worked for me when I replaced @input with @update:model-value:

    @update:model-value="newModuleName => updateEcts(newModuleName, targetIndex)"


  2. 0

    There are no such events like input or change in the VAutocomplete API.

    You should use update:modelValue instead. Here is a list with all the VAutocomplete API events.

    Your v-autocomplete should look like this:

    <v-autocomplete
  v-model="targetModules[targetIndex]['modulName']"
  :items="moduleNamesAndEcts.map(module => module.name)"
  :rules="rules.text"
  label="Module"
  item-text="name"
  item-value="name"
  @update:modelValue="(newModuleName) => updateEcts(newModuleName, targetIndex)"
/>

    To understand how is this update:modelValue working under the hood, check out this explanation from the official Vue’s documentation.

    I’m not sure about this, but it seems this change was introduced on the third version of Vuetify according to this question

    Login or Signup to reply.
  3. 0

    In Vue.js, when using v-model with a custom component like v-autocomplete, the component needs to emit an input event to update the bound value. It seems like the issue might be related to how you’re handling the input event in your v-autocomplete component.

    Let’s ensure that the v-autocomplete component emits the input event properly when its value changes. Ensure that v-autocomplete is emitting the input event correctly with the updated value.`<v-autocomplete

    v-model="targetModules[targetIndex]['modulName']" :items="moduleNamesAndEcts.map(module => module.name)" :rules="rules.text" label="Module"enter code here item-text="name" item-value="name" @input="(newModuleName) => updateEcts(newModuleName, targetIndex)" />

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search