vue-convert-model

vue-convert-model is a Vue component that transforms data to/from a child component's model.

vue-convert-model accepts a converter function and exposes a vue model (value property & input event). Data sent to the model (via value) is transformed with the converter function before it is sent to the child component. User input (via the input event) sent to the child component is similarly transformed before it is emitted by vue-convert-model.

vue-convert-model is a renderless component.

Installation

npm install --save vue-convert-model

Example

Include the component:

import Vue from 'vue'
import VueConvertModel from 'vue-convert-model'

export default {
  components: {
    VueConvertModel,
  },

  data() {
     return {
       text: '',
     }
   },

  methods: {
    upperCase( x ) {
      return (x || '').toUpperCase()
    },
  },
}

Usage

<template>
  <vue-convert-model v-model="text" :converter="upperCase">
    <textarea> <-- note: model available through its parent -->
    </textarea>
  </vue-convert-model>
</template>

---

License

MIT