One of the components in my project is an input wrapper that includes a Select and a Freeform text box for entering an exact amount. I'm struggling to bind the Freeform text box to both the parent field and the selected option. I'm unsure of how to emit the change/input events.
I am attempting to follow the guidelines outlined in the Custom Events documentation.
A simple example can be found here.
The InputWrapper component structure looks like this:
<template v-if="inputType === 'text'">
<input type="text" v-bind:value="value" v-bind="$attrs" v-on="inputListeners">
</template>
<template v-else-if="inputType === 'select'">
<select v-bind="$attrs" v-bind:value="value" v-on="inputListeners">
<option value>Select</option>
<option
v-for="option in options"
v-bind:value="option.Id"
v-bind:key="option.Id"
>{{option.Description}}</option>
</select>
<!--Only show the input if it's a "FreeformOption"-->
<!--How do I make this update the parent??-->
<input
type="text"
v-if="selectedOption.IsFreeformOption"
v-bind:value.sync="freeformValue"
v-bind="$attrs"
v-on:update="$emit('update:person.ExactIncome', '111')"
v-on:input="$emit('input:person.ExactIncome', '222')"
>
<!--Would ideally recursively call the InputWrapper component
<InputWrapper
inputType="text"
v-if="selectedOption.IsFreeformOption"
v-bind:value= "freeformValue"
v-on:input="$emit('input', $event)"
></InputWrapper>
-->
</template>
A live demo can be accessed by clicking here.
Integration with the model:
<InputWrapper
id="incomeLevels"
inputType="select"
:options="incomeLevels"
:freeformValue.sync="person.ExactIncome"
v-model="person.IncomeLevelID"
></InputWrapper>
For proper functionality, wrap the freeformValue in a computed property and emit the change event there.
wrappedFreeform: {
get() {
return this.freeformValue;
},
set(v) {
this.$emit("update:freeformValue", v);
}
}
Check out the fully functional demo HERE.