Как передать ребенку реактивную опору в Vuejs

Question

Я создаю модал многоразового использования, в котором я хочу передать реквизит :loading="loading". Но на данный момент свойство loading, инициализированное в данных, не является реактивным. Как я могу обновить загрузку в родительском компоненте, чтобы она реагировала внутри дочернего компонента?

Шаблон родительского компонента:

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

Сценарий родительского компонента:

     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 } }

Answer 1

Переместите this.loading = false; внутрь setTimeout и используйте функцию стрелки, как я использовал ниже, иначе вы не получите ссылку на this.

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