[Vuejs]-V-model fallthrough attribute on component child not working

by

1👍

✅

When setting v-model on a custom component you must declare a prop in the child called modelValue. Then, following the Vue documentation:

  1. Bind the value attribute of a native <input> element to the modelValue prop

  2. When a native input event is triggered, emit an update:modelValue custom event with the new value

Select.vue

<template>
  <div class="select" inheritAttrs="false">
    <select 
        v-bind="$attrs" 
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)">
      <slot></slot>
    </select>
    <!-- ... -->
  </div>
</template>

<script>
  export default {
    props: {
      modelValue: {
        type: String,
        default: ''
      }
    }
  }
</script>

Besides doing all that, you also had one mistake in your <option> v-for where you set :value="options", where options is the entire array of values, when it should be :value="option" which assigns a single string value.

<option v-for="option in options" :key="options" :value="option">

working Vue playground example

👤yoduh

Leave a comment