Насколько близко раскрывающийся список из vue-bootstrap-dropdown при нажатии кнопки на vue?

Вот образец выпадающего списка, который работает правильно.

<Dropdown>
  <div
    type = "button"
    aria-haspopup = "true"
    aria-expanded = "false"
  >
  Show Dropdown
  </div>
  <template #popover>
    <button
      @click = "submit"
    >
    Click me
    </button>
  </template>
</Dropdown>

<script>
method:{
  submit() {
    // How make Dropdown close
  }
}
</script>

Мне нужно закрыть раскрывающийся список после нажатия кнопки.

vue.js bootstrap-vue

05.04.2021 13:42

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Ответы 1

Определить showDropdown в данных
Используйте v-show = "showDropdown" на том, что вы хотите скрыть
Определите @click = "showDropdown = !showDropdown" в раскрывающемся заголовке, чтобы переключить раскрывающийся список
Установить showDropdown = false при отправке

См. Рабочий пример здесь

<template>
  <Dropdown>
    <div
      type = "button"
      aria-haspopup = "true"
      aria-expanded = "false"
      @click = "showDropdown = !showDropdown"
    >
      Show Dropdown
    </div>
    <div v-show = "showDropdown">
      <button
        @click = "submit"
      >
        Click me
      </button>
    </div>
  </Dropdown>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  data(){
    return {
      showDropdown: false
    }
  },
  methods: {
    submit() {
      this.showDropdown = false;
      // do more
    }
  }
  
});
</script>

Если вам нужен шаблон, вы можете использовать v-if вместо v-show.

вы добавили v-show в div, а не в шаблон. Он не работает с шаблоном.

— 05.04.2021 14:10

@AtousaDarabiЗачем вам нужен шаблон?

— 05.04.2021 14:22

@AtousaDarabi, если вам нужен шаблон, вы можете использовать v-if вместо v-show

— 05.04.2021 14:25

05.04.2021 13:51