Problem with Vue 3 and v-model

[Mobin-khorushi]

Hi sorry I'm new with Vue and sadly it seems i faced a big update and all docs are old or like you they throw a big hint but its not what i can discover can you please explain what i made wrong my prop is not getting updated ?!

here is my code

This is the SelectInput.vue

[mattelen]

Are you emitting your value to your parent component? I'm not seeing where that is happening. In all honesty I'm still picking up composition API so please "point out the obvious" if it is.

[smirnov-d]

@Mobin-khorushi, this is a working example of the SelectInput.vue

<template>
  <vue-multiselect
    :options="options"
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
  />
</template>

<script setup>
import VueMultiselect from 'vue-multiselect'

defineProps(['modelValue'])
defineEmits(['update:modelValue'])

const options = [
  'Vue.js',
  'React.js',
  'Angular.js'
]
</script>

[ilyen85]

You have to change this line: @update:model-value="modelValue"

To this: @update:model-value="$emit('update:modelValue', $event)"

You need to $emit the update:modelValue event and the value will be a special event called $event which will be the select field's value.

Just realised @smirnov-d is already answered your question... Sorry xD

[Mobin-khorushi]

thanks alot guys sorry for late reply I actually find out your answers my self after trying a lot but anyway thanks

[gurparshad]

does not work