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.
npm install --save vue-convert-model
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()
},
},
}
<template>
<vue-convert-model v-model="text" :converter="upperCase">
<textarea> <-- note: model available through its parent -->
</textarea>
</vue-convert-model>
</template>