Ящик в компоненте выдает предупреждение «Избегайте мутации напрямую…» в рамках Quasar - PullRequest
Новая
       21

Ящик в компоненте выдает предупреждение «Избегайте мутации напрямую…» в рамках Quasar

1 голос
/ 10 апреля 2020

Я использую Quasar Framework в версии 1.6.2. и хочу использовать компонент (Drawer. vue) для моего ящика. Компонент используется в моем файле макета (MainLayout. vue).

В консоли отображается следующее сообщение об ошибке: 

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "rightDrawerOpen"

Ящик работает, но не первый клик - только при последующих кликах.

Как правильно передать модель родителей в мой ящик?

Компонент: Ящик. vue

<template>
    <q-drawer show-if-above v-model="rightDrawerOpen" side="right" bordered>
        <q-list>
            <q-item-label header>Menü</q-item-label>
        </q-list>
    </q-drawer>
</template>

<script>
export default {
    name: "Drawer",
    props: {
        rightDrawerOpen: Boolean
    }
};
</script>

Родитель: MainLayout. vue

<Drawer :right-drawer-open="rightDrawerOpen" />

1 Ответ

1 голос
/ 28 апреля 2020

Я бы переместил компонент q-box обратно в компонент MainLayout. vue, затем поместил бы q-list в дочерний компонент. Затем переключение «rightDrawerOpen» будет происходить в «данных» MainLayout. vue, а не в подпорках дочернего компонента, из которого происходит ошибка. Пример:

MainLayout. vue: 

<template>
    <q-layout>

        <q-drawer show-if-above v-model="rightDrawerOpen" side="right" bordered>
            <DrawerContents />
        </q-drawer>

        <q-page-container>
            <router-view />
        </q-page-container>

    </q-layout>
</template>

<script>
import DrawerContents from './DrawerContents.vue';

export default {
    components: {
        DrawerContents,
    },
    data() {
        return {
            rightDrawerOpen: true,
        };
    },
};
</script>

DrawerContents. vue: 

<template>
    <q-list>
        <q-item-label header>Menü</q-item-label>
    </q-list>
</template>
...