After exploring the limitations of v-model in Vue 2.x in this Stack Overflow thread, I discovered a way to connect parent and child components using v-model. The solution proposed is as follows:
--- ParentTemplate:
<Child v-model="formData"></Child>
-- ChildTemplate:
<input v-model="localValue">
-- ChildScript:
computed: {
localValue: {
get() {
return this.value;
},
set(localValue) {
this.$emit('input', localValue);
},
},
},
I attempted to rewrite this solution using the vue-class-component syntax, but faced challenges. The code snippet below highlights the issue:
export default class TextEditor extends Vue {
@Prop({ type: String, required: true }) private readonly value!: string;
private get localValue(): string {
return this.value;
}
private set localValue(newValue: string) {
this.$emit("input", newValue);
}
}
The solution provided for writing computed setters in class-based components in vuejs does not apply here due to the read-only nature of component properties. Therefore, directly modifying this.value is not possible.
Issue with Direct value Usage
<EditorImplementation
:value="value"
@input="(value) => { onInput(value) }"
/>
@Component({
components {
EditorImplementation: CK_Editor.component
}
})
export default class TextEditor extends Vue {
@Prop({ type: String, required: true }) private readonly value!: string;
@Emit("input")
private onInput(value: string): void {
console.log("checkpoint");
console.log(this.value);
}
}
Let's assume the initial value is an empty string.
- Input "f"
- Log will show
"checkpoint" "" - Input "a"
- Log will show
"checkpoint" "f" - Input "d"
- Log will show
"checkpoint" "fa"
And so forth.