Блог

Я ищу способ открыть vuetify v-выберите компонент при нажатии на кнопку со значком. V-выбор не должен быть виден, когда он закрыт, только при открытии нажатием кнопки. Это похоже на то, что кнопка переключает состояние v-выбора

Цель состоит в том, чтобы фильтровать столбцы для отображения в таблице данных, и причина, по которой я хочу, чтобы она была скрыта по умолчанию, заключается в том, что у меня уже есть компонент v-select на панели инструментов таблицы для выбора данных для отображения.

У меня есть только это мой соответствующий код, у меня нет другой идеи, как продолжить отсюда

  <v-btn small icon>
      <v-icon>
        mdi-pencil
          <v-select :items="headers"></v-select>
      </v-icon>
 </v-btn>
  

Вот решение: создайте переменную (которая названа toggleSelect в этом примере), которая будет управлять видимостью <v-select/> и ее <v-menu/> (выпадающие параметры). <v-select/> имеет menu-props , которые мы можем использовать для управления видимостью меню. Для поля выбора мы можем просто использовать v-if , чтобы скрыть его.

 <v-btn 
  ...
  @click="toggleSelect = !toggleSelect"
>
  <v-icon>mdi-pencil</v-icon>
</v-btn>
<v-select
  :items="headers"
  v-if="toggleSelect"
  :menu-props="{value: toggleSelect}"
/>
  

 data: () => ({
  headers: [...],
  toggleSelect: false,  // let's not show the <v-select/> at first load.
})
  

Вот образец демонстрации с <v-data-table/> реализацией.