Currently, I am working with Vue.js and TypeScript while also utilizing the vue-property-decorator. My goal is to establish two-way data binding between a parent and child component. Below is an example of what I have in mind:
Parent Component
<template>
<progress :is-loaded.sync="isLoaded"/>
</template>
@Component
export default class ParentComponent extends Vue {
get isLoaded() { return Store.getters["isLoaded"]; }
set isLoaded(value: boolean) { Store.commit("isLoaded", value); }
}
Child Component
<template>
<progress :value="_value" min="0" max="100"></progress>
{{_isLoaded}}
</template>
@Component
export default class ChildComponent extends Vue {
@Prop()
public isLoaded: boolean;
public _isLoaded: boolean;
public _value: number;
public mounted() {
this._isLoaded = this.isLoaded;
this._value = this.value;
}
@Watch("isLoaded")
public onIsLoadedChanged() {
if (!isLoaded) {
// Animate _value from 0 to 100.
this._isLoaded = true;
this.$emit("update:isLoaded", this._isLoaded);
}
}
}
Is there a more concise way to achieve the desired result without having to use both isLoaded and _isLoaded, along with this.$emit using a magic string like update:isLoaded? It all feels quite verbose – perhaps there's a simpler approach or some encapsulation that can be implemented?