Как прагматично открыть раскрывающийся список из другого компонента в Vue с помощью MDB Vue - PullRequest
Новая
       19

Как прагматично открыть раскрывающийся список из другого компонента в Vue с помощью MDB Vue

0 голосов
/ 03 апреля 2020

Я пытаюсь открыть выпадающее меню MDB, когда нажимаю модальную кнопку. Модал - это отдельный компонент. Как я могу общаться между двумя компонентами? 

<mdb-dropdown>
                <!-- Shopping Cart Button -->
                <mdb-dropdown-toggle class="pl-0" ref="toggle" slot="toggle">
                    <a>
                        <span class="fa-stack">
                            <i class="fa fa-shopping-cart fa-stack-2x"></i>
                            <i id="cartTotal" style="font-size: 14px;" class="fa fa-stack-1x">{{$store.state.cartLength}}</i></span>
                    </a>
                </mdb-dropdown-toggle>

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

 mounted() {   
    this.$refs.toggle.$el.click();
  }

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

1 Ответ

0 голосов
/ 03 апреля 2020

Для достижения такой связи между компонентами вы можете использовать шину событий или Vuex. Поскольку вы уже используете последнее, добавьте состояние в вашем магазине как showDropDown:false и продолжайте со следующего:

  1. В компоненте, содержащем кнопку, вам нужно отправить действие на click чтобы изменить состояние на true.
  2. В компоненте, содержащем раскрывающийся список, необходимо добавить ...mapState для добавленного состояния, чтобы вы могли v-if раскрывающийся список в соответствии с этой переменной или отслеживать его изменение и делайте то, что вы уже делаете.
  3. Не забудьте отправить еще одно действие, которое возвращает состояние в состояние false при закрытии раскрывающегося списка.
...