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>