Not working several events in va-select

[EugenGedroyc]

Vuestic-ui version: 1.6.5

Steps to reproduce

 <va-select
      v-model="valueInterval"
      @update-model-value="changePeriod()"
      @change="changePeriod()"
      @clear="changePeriod()"
    />
<script setup>
    const changePeriod = () => {
      console.log('change');
    };
</script>

What is the expected behavior? I want to see 'change' in console, when i selcted item in va-select (similar at event '@ change')

What is the current behavior? '@ update-model-value' not working(even with :model-value="valueInterval"), but '@ clear' is work nice

[Bond-Addict]

I've ran into this exact issue myself. There doesnt seem to be a @change event. You just do

import {watch} from 'vue'

watch(valueInternal, () => {
    console.log('change');
});

I come from a angular background, so I expected the same event to be available as well.

[EugenGedroyc]

Thank you, for answer. I thinked about "watch".May be add it to documentation?

[Bond-Addict]

@EugenGedroyc personally, I think that change should be an event on every form component, but it wouldn't hurt to add that to the documentation either.

[Bond-Addict]

@EugenGedroyc You'll want to close this bug and open a feature request instead.

[m0ksem]

@EugenGedroyc, you should be able to use update:model-value event. It is fired each time modelValue is changed. In vue2 we have @input or @change events, but in vue3 we use v-model with update:model-value event instead of @input or @change. Angular has similar behavior to vue2.

Notice it is update:model-value, not update-model-value.

Close this issue if it solves your problem or you can add something to docs to make it clear for other users.

[EugenGedroyc]

@m0ksem thank you! I understood and learned more information about events in vue. The 'model-value' is not obvious, and i glad for the macro defineModel =D
The only thing that comes to my mind is replaces all documentation with update:model-value. Same as update:error-messages and etc. I would make it for newbies. Also I would add to the native events badge 'native'. But it work is harder

[Bond-Addict]

@EugenGedroyc I 100% agree with changing the docs. My previous experience with angular would have lead me to think that update-model-value (the event) is what you would call, or @update-model-value. I would never have guessed update:model-value which could be due to me also being relatively new at Vue but I think others will struggle with it too.

[m0ksem]

I think we have wrong formatting in docs, so update:modelValue becomes update-model-value.... Sorry for misleading!

[Bond-Addict]

@m0ksem its all good. I didn't know that @update:modelValue was a vue 3 thing and not a Vuestic event. I would assume that scroll-bottom translates to @scroll:bottom="myFunction"

I think it would be easier to understand if the docs were formatted like

• @update:
  • modelValue
  • search
  • errorMessages

or something similar.

[m0ksem]

@m0ksem its all good. I didn't know that @update:modelValue was a vue 3 thing and not a Vuestic event. I would assume that scroll-bottom translates to @scroll:bottom="myFunction"

I think it would be easier to understand if the docs were formatted like

• @update:
  • modelValue
  • search
  • errorMessages

or something similar.

scroll-bottom is correct one. I'm working on fix for docs.