#javascript #visual-studio #vue.js #vuetify.js #v-navigation-drawer
#javascript #visual-studio #vue.js #vuetify.js #v-навигация-ящик
Вопрос:
Я очень новичок в Vue, поэтому я не уверен, как это проверить, но мой vue v-navigation-drawer находится ниже, он находится в app-root.vue. Сначала он работал, закрываясь при нажатии на элемент ящика, но теперь вам нужно щелкнуть дважды, чтобы он закрылся.
Первый щелчок приведет вас на страницу, а затем второй щелчок закроет панель. К вашему СВЕДЕНИЮ — если я уже на странице, то щелчок по ней один раз закроет ее.
Я не вижу никаких ошибок в отладчике.
Вот мой ящик и скрипт
export default {
data() {
return {
drawer: false,
}
},
computed: {
isPageLoading: {
get() {
return this.$store.state.appRoot.isPageLoading
},
set(value) {
this.$store.commit('appRoot/isPageLoadingUpdate', value)
}
},
}
} <template>
<div id="app">
<v-app id="inspire">
<v-navigation-drawer fixed temporary disable-resize-watcher v-model="drawer" app>
<v-subheader class="mt-3 grey--text text--darken-1">ENTRY</v-subheader>
<v-list dense>
<v-list-tile @click="drawer = !drawer" to="/entry/records">
<v-list-tile-content>
<v-list-tile-title>Records</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/coworkers">
<v-list-tile-content>
<v-list-tile-title>Coworkers</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/defendants">
<v-list-tile-content>
<v-list-tile-title>Defendants</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/documentjobs">
<v-list-tile-content>
<v-list-tile-title>Document Jobs</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/jobsites">
<v-list-tile-content>
<v-list-tile-title>Jobsites</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/locations">
<v-list-tile-content>
<v-list-tile-title>Locations</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/products">
<v-list-tile-content>
<v-list-tile-title>Products</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/ships">
<v-list-tile-content>
<v-list-tile-title>Ships</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/sources">
<v-list-tile-content>
<v-list-tile-title>Sources</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="drawer = !drawer" to="/entry/witnesses">
<v-list-tile-content>
<v-list-tile-title>Witnesses</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-divider dark></v-divider>
<v-subheader class="mt-3 grey--text text--darken-1">ADMIN</v-subheader>
<v-list-tile @click="drawer = !drawer" to="/Admin/Users">
<v-list-tile-content>
<v-list-tile-title>Users</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<br />
</v-list>
</v-navigation-drawer>
<v-toolbar color="indigo" dark fixed app>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>Mpid2</v-toolbar-title>
</v-toolbar>
<v-content>
<router-view></router-view>
</v-content>
<v-footer fixed app height="auto" style="min-height: 0">
<!--<v-progress-linear :active="isPageLoading" class="ma-0" :indeterminate="true"></v-progress-linear>-->
</v-footer>
</v-app>
</div>
</template> Комментарии:
1. Можете ли вы указать действительную скрипку или codepen?
2. У меня похожая проблема. Для переключения ящика необходимо дважды нажать.
Ответ №1:
Я изменил ящик: @click.stop на @click.native и теперь работает.
Ответ №2:
Это правда, что вы использовали Vuex. Но если вы не хотите дважды щелкать, вы можете сделать следующее:
шаг 1) Импортируйте директиву v-click-outside из Vuetify и остановите и запустите вашу систему один раз.
шаг 2) В дополнение к методам, которые вы определили в HTML, создайте другой метод для этого каталога, о котором я упоминал, например, следующий:
<v-list-tile
@click="drawer = !drawer"
***v-click-outside="onClickOutside"
to="/entry/records">
<v-list-tile-content>
<v-list-tile-title>Records</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
шаг 3) Определите следующий метод один раз для этого следующим образом:
onClickOutside() {
this.$store.commit('appRoot/isPageLoadingUpdate', value)
},
шаг 4) Следует отметить только одно: если
drawer: false , было, вы должны запретить запуск метода. Например, следующий код:
onClickOutside() {
if (drawerAction === true) {
this.$store.commit('appRoot/isPageLoadingUpdate', value)}
},