Nuxt + Vue + Vuetify: this.$vuetify.breakpoint неправильно инициализирован как «xs»
Использование контрольных точек vuetify для переключения между мобильным и настольным макетами веб-сайта
Мой код (сжатый(
<v-layout wrap :column = "mobile">
.
.
components and stuff
.
.
<v-layout>
<script>
.
.
computed: {
mobile: function () {
return ['xs', 'sm'].includes(this.$vuetify.breakpoint.name)
}
}
.
.
</script>
Итак, я использую вычисляемую функцию, чтобы определить, есть ли у клиента маленький экран.
Моя проблема в том, что this.$vuetify.breakpoint.name изначально установлен как xs
Мой обходной путь в настоящее время имеет метод loaded и на верхнем уровне делает
<v-app v-if = "loaded"
.
.
<v-layout>
.
</v-layout>
.
.
<v-app>
Но теперь я также должен обернуть все это <NoSsr>
Есть ли более правильный способ правильно загрузить компоненты, чтобы они не перескакивали с мобильной версии на полноразмерную после полной загрузки страницы?
Ответы 1
Общий обходной путь, предложенный здесь, использует mounted() ловушку для установки некоторой формы флага, который будет проверяться внутри computed:
data: () => ({
// ...
isMounted: false
}),
mounted() {
this.isMounted = true;
},
// ...
computed: {
mobile: function () {
return this.isMounted && ['xs', 'sm'].includes(this.$vuetify.breakpoint.name);
}
}
В качестве альтернативы вы можете использовать любые другие средства, имеющиеся в вашем распоряжении, чтобы установить этот флаг mobile detection как можно раньше.
Это прекрасно работает. У вас есть предложение о том, как расширить мобильное приложение var? Зафиксировать его в хранилище vuex внутри корневого компонента?