How to pass a reactive prop to child in Vuejs

Question

I creating a reusable modal in which I want to pass the prop :loading="loading". But as of now the loading property initialized in data is not reactive. How can I update loading in the parent so it is reactive inside the child component ?

Parent component template:

<child_component :loading="loading"></child_component>

Parent component script:

     data() {
            return {
                loading: false
            }
        },

          onDelete() {
                this.loading = true;
                setTimeout(function(){ alert("Hello"); }, 3000);
                this.loading = false;
            },

child :

       <v-btn icon
           :loading="loading"
            <v-icon>{{icon}}</v-icon>
       </v-btn>

        ...

props: { disabled: { Boolean, default: false } }

Syed Syed · Accepted Answer · 2020-03-23T19:11:24

Move this.loading = false; inside setTimeout and use arrow function as i have used below else you will not get reference to this.

onDelete() {
  this.loading = true;
  setTimeout(() => { this.loading = false; }, 3000);
}

How to pass a reactive prop to child in Vuejs

1 Answers