Vue Lifecycle Hook - условно предотвратить создание - PullRequest
Новая
       8

Vue Lifecycle Hook - условно предотвратить создание

0 голосов
/ 21 октября 2019

Есть ли способ предотвратить создание компонента во время ловушки жизненного цикла? Например: 

beforeCreated() {
    //checking value from vuex store
    if (this.$store.state.attendeesCount >= this.$store.state.maxAttendees) {
        //prevent further propagation, don't create an instance of component
    }
}

Дело в том, что у меня есть родительский компонент с несколькими дочерними компонентами, которые содержат форму для создания участников (1 компонент = 1 участник). Я хотел бы запретить создание дочернего компонента, если семинар уже полностью забронирован.

Обновление: родительский компонент является базовым компонентом для десятка многорядных компонентов формы, и я не хотел выполнять там проверки, чтобы сохранитьэто как можно более абстрактно.

1 Ответ

0 голосов
/ 22 октября 2019

Вместо того, чтобы фактически предотвращать создание дочернего компонента во время ловушки жизненного цикла, я отправлял пользовательское событие, как только условие выполнено. Родительский компонент прослушивает это пользовательское событие и удаляет экземпляр дочернего компонента.

Дочерний: 

beforeCreate() {
    if (this.$store.state.attendeesCount >= 
    this.$store.state.maxAttendees) {
        this.$emit('preventCreation', {message: 'No more places'})
    }
}

Родительский: 

<template>
    <component v-for="(item, index) in components"
         @preventCreation="preventCreation(index, $event)"
    ...
    >
    </component>
...
</template>
...
methods(){
    preventCreation(index, payload){
        this.components.splice(index, 1)
        alert(payload.msg)
    }
}
...