[Vuejs]-Vue.js Two-Way sync Data Binding using vue-property-decorator

by

0👍

At what point in your app does the value of isLoaded change? If it only changes in the parent, you don’t need to emit an event back up, and you can just use the prop without the @Watch and without the _isLoaded variable.
If isLoaded changes in the child, you don’t need the prop and the duplicate variable. You can just emit a loaded event and listen for that event in the parent.

This is a simplified example where the style of the child changes when the parent changes isLoaded

parent

<template>
  <progress :is-loaded="isLoaded"/>
</template>

@Component
export default class ParentComponent extends Vue {
  public isLoaded: boolean = false
  created(){
    setInterval(()=>this.updateStatus(), 500)
  }
  this.updateStatus(){
    this.isLoaded = true
  }
}

child

<template>
 <div :class="{ full: isLoaded }">Loaded is {{ isLoaded }}</div>
</template>

@Component
export default class ChildComponent extends Vue {
  @Prop()
  isLoaded: boolean;
}

<css>
   .full {width:100%}
</css>
👤Kokodoko

Leave a comment