v-model with a component in VueJS 3

Hello,

I'm trying to implement a select / option component in VueJS 3 with v-model.

<select v-model="fundingId" placeholder="Choisir un type de financement">
  <option
    v-for="funding in fundings"
    :key="funding.id"
    :value="funding.id">
    {{funding.name}}
  </option>
</select>

And in the parent component I have a form including my select / option component.

<fundings-select v-model:fundingId="student.funding_id"></fundings-select>
{{ student.funding_id }}

According to the documentation of the new version of VueJS, the simple fact writing v-model:fundingId="student.funding_id" should update the props synchroneously.

https://v3.vuejs.org/guide/migration/v-model.html

But it doesn't work and the student.funding_id value displayed under the fundings-select component displays always the same initial value even if I select another option.

What I need is : when I update the selected value by selecting an option, the parent component retrieves the selected value in the child component.

Do you have any idea ?

Thanks for your help ;).

Vincent

martinbean

4 years ago

Best Answer

Level 80

@vincent15000 You need to study the docs a bit more: https://v3.vuejs.org/guide/component-basics.html#using-v-model-on-components

The names of the props and events changed in Vue 3. So now you need to bind a modelValue prop, and emit a update:modelValue event:

<!-- resources/js/components/ParentComponent.vue -->
<template>
  <fundings-select
    v-model="student.funding_id"
    :fundings="fundingOptions"
  />
  <p v-if="student.funding_id">Selected funding ID: {{ student.funding_id }}</p>
</template>

<!-- resources/js/components/FundingsSelect.vue -->
<template>
  <select
  :value="modelValue"
  @input="$emit('update:modelValue', $event.target.value)"
>
    <option
      v-for="funding in fundings"
      :key="funding.id"
      :value="funding.id"
      v-text="funding.name
    />
  </select>
</template>

<script>
export default {
  props: {
    modelValue: {
      default: null,
      required: false,
      type: String,
    },
  },
  emits: ['update:modelValue'],
};
</script>

Now your student.funding_id value will be updated based on what is selected in the <fundings-select> component.

vincent15000

4 years ago

Level 63

Thank you @martinbean.

I have tested your solution and it works fine ;).

I have also tested with v-model:fundingId="student.funding_id" and fundingId instead of modelValue, it works fine too.

Then I have tested this with Element-Plus CSS framework with the el-select component and it doesn't work at all. According to the documentation of Element-Plus el-select component, the only method is @change. But with @change instead of @input, it doesn't work.

1 like

vincent15000

4 years ago

Level 63

I just found the solution with el-select. It is necessary to use a computed property.

<el-select v-model="value">
  ...
</el-select>

...

computed: {
  value: {
    get() {
      return this.modelValue
    },
    set(value) {
      this.$emit('update:modelValue', value)
    }
  }
}

1 like

Please or to participate in this conversation.