как держать выпадающее меню, пока я не отправлю выбранные списки - PullRequest
Новая
       26

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

0 голосов
/ 26 марта 2020

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

[! [Введите описание изображения здесь] [1]] [1] `

<v-menu offset-y>
                <template v-slot:activator="{ on }">
                    <v-btn text v-on="on">
                        Details
                    </v-btn>
                </template>
                <v-list>
                    <v-list-item>
                        <v-form ref="form">
                            <v-radio-group v-model="metrics" required>
                                <v-radio
                                    label="ABC"
                                    value="abc"
                                ></v-radio>
                                <v-radio label="XYZ" value="xyz"></v-radio>
                            </v-radio-group>
                            <v-divider></v-divider>
                            <v-radio-group v-model="order" required>
                                <v-radio
                                    label="Higher"
                                    value="higher"
                                ></v-radio>
                                <v-radio
                                    label="Lower"
                                    value="lower"
                                ></v-radio>
                            </v-radio-group>
                            <v-divider></v-divider>
                            <v-btn
                                @click="
                                    sortTableData(
                                        metrics,
                                        order,
                                        $props.tableItems
                                    )
                                "
                            >
                                Apply
                            </v-btn>
                        </v-form>
                    </v-list-item>
                </v-list>
            </v-menu>`

однако,

  • когда я нажимаю на раскрывающийся список и выбираю, например, для: Установки, меню закрывается ..
  • Я должен нажать на раскрывающийся список снова, чтобы выбрать выше / ниже .. и меню закрывается снова ..
  • И снова мне нужно нажать на выпадающий список, чтобы нажать кнопку «Применить».

Вопрос : Есть ли способ удержать это меню, пока Я нажимаю « Применить »?

Заранее большое спасибо за помощь!

1 Ответ

1 голос
/ 26 марта 2020

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

Для этого вам необходимо:

  • добавить :close-on-content-click="false" к вашей <v-menu> ( do c)
  • добавьте директиву v-model, связанную с логическим значением «data» (например: v-model="isDropdownDisplayed"), инициализированный к false (закрытое раскрывающееся меню при загрузке)

Первая команда говорит Vuetify не закрывать раскрывающееся меню при нажатии на контент (это будет делать только внешний щелчок), в то время как вторая опора связывает вязкость выпадающего списка с вашим логическим значением пользовательских данных.

Поскольку ваше логическое значение «данных» инициализируется равным false (закрытый выпадающий список) и автоматически обновляется до true через v-model при открытии выпадающего меню вам нужно передать это значение в false для вашего sortTableData метода.

Предполагается, что вы используете SF C (но подход одинаков для чистых JS компонентов):

Template 

<v-menu offset-y :close-on-content-click="false" v-model="isDropdownDisplayed">
  ...
</v-menu>

Сценарий 

{
  name: 'MyComponent',
  data: function () {
    return {
      isDropdownDisplayed: false
    }
  },
  methods: {
    sortTableData: function (/* args */) {
      // ...
      this.isDropdownDisplayed = false
      // ...
    }
  }
}
...