Can't pass value prop to custom input component

user_871404 0
Viewed 153

I have a custom input component that generally works well. But since yesterday I want to pass to it a value from the parent component in certain cases (namely if a cookie is found for that field, pre-fill the field with the cookie value).

Parent component (simplified):

<custom-input
  v-model="userEmail"
  value="John Doe"
/>

But for a reason I cannot comprehend, the value prop doesn't work. Why not?

My custom input component (simplified):

<template>
  <input
    v-bind="$attrs"
    :value="value"
    @blur="handleBlur"
  >
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  mounted () {
    console.log(this.value) // displays nothing, whereas it should display "John Doe"
  },
  methods: {
    handleBlur (e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>
prop vue.js
1 Answers

value prop is used with the emitted event input to do the v-model job, so you should give your prop another name like defaultValue to avid this conflict:

<custom-input
  v-model="userEmail"
  defaultValue="John Doe"
/>

and

<template>
  <input
    v-bind="$attrs"
    :value="value"
    @blur="emitValue($event.target.vaklue)"
  >
</template>
<script>
export default {
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      default: ''
    },
   defaultvalue: {
      type: String,
      default: ''
    },
  },
  mounted () {
    this.emitValue(this.defaultValue) 
  },
  methods: {
    emitValue(val) {
      this.$emit('input', val)
    }
  }
}
</script>
user_81728570
Related