[Vuejs]-Passing reserved names as props

by

0👍

If you want to pass v-model from the parent to child, simply use value as a prop and emit input event as shown in VueJS documentation :

<template>
  <div>
    <label>{{ inputTitle }}</label>
    <input v-model="myvalue" @blur="onblur" :name="name" :type="type">
    <p style="color:red">Fail</p>
  </div>
</template>

<script>
export default {
  props: ['inputTitle', 'value', 'name', 'type'],
  computed : {
    myvalue : {
        set : function (newVal) {
            this.$emit('input',newVal);
        },
        get : function () {
            return this.value;
        }
    }
  },
  methods : {
    onblur : function (event) {
        this.$emit('blur',event);
    }
  }
}
</script>

and you use your component in the parent as such:

<InputElement :input-title="someTitle" v-model="someName" @blur="someFunction" :name="someName" :type="someType">

I haven’t tested this code though.

Leave a comment