VueJS2: Избегайте прямого изменения свойства, так как значение будет перезаписываться всякий раз, когда родительский компонент будет перерисовываться - PullRequest
Новая
       32

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

0 голосов
/ 05 февраля 2020

Я создаю очень просто Popup Modal Используя Vuejs2 и TailwindCss. Однако я сталкиваюсь с ошибкой, подобной приведенной ниже, когда пытаюсь нажать Button ..

Избегайте непосредственного изменения объекта, поскольку значение будет перезаписываться при повторной визуализации родительского компонента.

In Parent Component

// CardModal

<template>
    <div class="bg-white">
        <div v-if="showing">
            Modal
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showing: false,
        }
    }
}
</script>

Child Components

<button  @click="showing = true" class="px-4 my-4 mx-3 bg-blue-400 py-1 font-bold rounded text-white">
    Add Product
</button>

<!-- Modal -->

<cardModal :showing="showing" />

// Script

    props: {
        showing: {
            // required: true,
            type: Boolean,
        }
    },

Заранее спасибо ...

1 Ответ

1 голос
/ 05 февраля 2020

Трудно понять ваш код, но вы не можете напрямую изменить значение prop в своем дочернем компоненте, вместо этого вы можете отправить событие своему родителю, которое изменит значение prop для вас.

например, ваш ребенок компонент, который имеет 

<template>
 @click="$emit('show',true)"
</template>
//
 props: {
        showing: {
            // required: true,
            type: Boolean,
        }
    }

ваш родитель 

<cardModal :showing="showing" @show="showing=$event" />
...