Родительская привязка логическая, но дочерний полученный номер

Не знаю, как объяснить ... У меня есть такая составляющая:

<template>
    <base-layout>
        <template #main>
            <principal-layout>
                <template #dreta>
                    <dot-spinner :is-loading="isLoading"></dot-spinner>
                    <seleccio-estudis :estudis="estudis" @crearsolicitud="crearSolicitud"></seleccio-estudis>
                </template>
            </principal-layout>
        </template>
    </base-layout>
</template>

со сценарием

...
data() {
    return {
        isLoading: false,
    }
},
methods: {
    crearSolicitud(estudis_id) {
        console.log(typeof(this.isLoading));
        this.isLoading = true;
        this.isLoading = setTimeout(() => {
            this.isLoading = false;
        }, 3000);
...

И в дочернем компоненте:

<template>
    <div class="vld-parent">
        <loading :active.sync="isLoading"
                    :can-cancel="false"
                    :is-full-page="true"
                    :loader="'dots'" :color="'#58b033'"
                    :width="320" :height="320"></loading>
    </div>
</template>

<script>
    import Loading from 'vue-loading-overlay'
    import 'vue-loading-overlay/dist/vue-loading.css'

    export default {
        components: {
            Loading
        },
        props: {
            isLoading: Boolean,
        },
    }
</script>

Все работает нормально, при нажатии на кнопку загрузчик всплывает и сбрасывается через 3 секунды после этого, но я получаю это на консоли:

boolean 2 app.js: 41533 [Vue warn]: недопустимое свойство: ошибка проверки типа для свойства isLoading. Ожидается логическое значение, получено число со значением 15.

найти в

--- ›в resources / js / Components / Layout / DotSpinner.vue в resources / js / LayoutsNous / PrincipalLayout.vue в resources / js / LayoutsNous / BaseLayout.vue в resources / js / Pages / Proves / Home.vue

Каждый раз, когда я перезагружаю страницу, значение равно 15, но каждый раз, когда я нажимаю кнопку, которая генерирует событие, значение увеличивается на одну или две единицы.

Есть идеи, что происходит? Я делаю то же самое в других компонентах и ​​работает без предупреждений.


vue.js inertiajs
person David Barrabes Vera    schedule 03.03.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы устанавливаете значение this.isLoading на свой setTimeout:

this.isLoading = setTimeout(() => {
  this.isLoading = false;
}, 3000);

Измените это на:

setTimeout(() => {
  this.isLoading = false;
}, 3000);
person Hannah    schedule 03.03.2021
comment
Да, верно ... но преобразование происходит до этого набора инструкций !!! - person David Barrabes Vera; 04.03.2021