[Vuejs]-Vue js : custom input clear value

by

1👍

✅

the issue is that you’re not receiving the value in the custom input. While you have v-model in the parent component, for the v-model magic to work the component needs to implement the value prop and watch for change.

Here is what that might look like 

<template>
    <div class="content">
        <p>
            <slot></slot>
        </p>
        <input v-model="content" class="textbox" :type="type" @input="handleInput">
    </div>
</template>

<script>
export default {
  name: 'vTextbox',
  props:{
      value: String, // added value prop
      type: String,
  }, 
  data: function(){
      return {
          content: ""
      }
  },
  watch:{
    value(val) {
      this.content = val; // added watch to override internal value, this will allow clear to work
    }
  },
  methods:{
        handleInput(){
          this.$emit('input', this.content)
      }
  }
}
</script>
👤Daniel

Leave a comment