Vfrdtyky

I have a 3rd party input component (a vuetify v-text-field).

For reasons of validation i prefer to wrap this component in my own.

my TextField.vue

<template>

    <v-text-field

            :label="label"

            v-model="text"

            @input="onInput"

            @blur="onBlur"

            :error-messages="this.getErrors(this.validation, this.errors)"

    ></v-text-field>

</template>



<script>

    import VTextField from "vuetify/es5/components/VTextField";

    import {vuelidateErrorsMixin} from '~/plugins/common.js';

    export default {

        name: "TextField",

        props: ['label', 'value', 'validation', 'errors'],

        mixins: [vuelidateErrorsMixin], //add vuelidate

        data: function() {

            return {

                'text': this.value

            }

        },

        components: {

            VTextField

        },

        methods : {

            onInput: function(value) {

                this.$emit('input', value);

                this.validation.$touch();

            },

            onBlur: function() {

                this.validation.$touch();

            }

        },

        watch: {

            value: {

                immediate: true,

                handler: function (newValue) {

                    this.text = newValue

                }

            }

        }

    }

</script>

which is used in another component

<template> 

 ...   

  <TextField v-model="personal.email" label="Email" 

        :validation="$v.personal.email" :errors=""/> 

   ... 

</template> 

<script> 

      ...imports etc. 

      export default {   ...     

          data: function() {

              return {

                  personal: {

                      email: '',

                      name: ''

                  }

            }      

      },      

      components: [ TextField ] 

    } 

</script>

This works fine but i wonder if there is a much more cleaner approach than to replicate the whole v-model approach again. As now my data is duplicated in 2 places + all the extra (non needed) event handling...

I just want to pass the reactive data directly through to the v-text-field from the original temlate. My TextField doesn't actually need access to that data at all - ONLY notified that the text has changed (done via the @input, @blur handlers). I do not wish to use VUEX as this has it's own problems dealing with input / forms...

Something more close to this...

<template>

    <v-text-field

            :label="label"

            v-model="value" //?? SAME AS 'Mine'

            @input="onNotify"

            @blur="onNotify"

            :error-messages="this.getErrors(this.validation, this.errors)"

    ></v-text-field>

</template>



<script>

    import VTextField from "vuetify/es5/components/VTextField";

    import {vuelidateErrorsMixin} from '~/plugins/common.js';

    export default {

        name: "TextField",

        props: ['label', 'validation', 'errors'], //NO VALUE HERE as cannot use props...

        mixins: [vuelidateErrorsMixin], //add vuelidate

        components: {

            VTextField

        },

        methods : {

            onNotify: function() {

                this.validation.$touch();

            }

        },

    }

</script>

I cannot find anything that would do this.

Using props + v-model wrapping is what i do.

You need to forward the value prop down to the wrapped component, and forward the update event back up (see https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components for more details):

<template>

  <wrapped-component

    :value='value'

    @input="update"

  />

</template>



<script>

  import wrappedComponent from 'wrapped-component'



  export default {

    components: { 'wrapped-component': wrappedComponent },

    props: ['value'],

    methods: {

      update(newValue) { this.$emit('input', newValue); }

    }

  }

</script>

Somewhere else:

<my-wrapping-component v-model='whatever'/>

I've create a mixin to simplify wrapping of a component.

You can see a sample here.

The mixin reuse the same pattern as you with "data" to pass the value and "watch" to update the value during a external change.

export default {

  data: function() {

    return {

      dataValue: this.value

    }

  },

  props: {

    value: String

  },

  watch: {

    value: {

      immediate: true,

      handler: function(newValue) {

        this.dataValue = newValue

      }

    }

  }

}

But on the wraping component, you can use "attrs" and "listeners" to passthrough all attributes and listener to your child component and override what you want.

<template>

  <div>

    <v-text-field

        v-bind="$attrs"

        solo

        @blur="onBlur"

        v-model="dataValue"

        v-on="$listeners" />

  </div>

</template>



<script>

import mixin from '../mixins/ComponentWrapper.js'



export default {

  name: 'my-v-text-field',

  mixins: [mixin],

  methods: {

    onBlur() {

      console.log('onBlur')

    }

  }

}

</script>