Когда я вхожу в систему, моя панель v-app меняется с именем пользователя, затем, если я перезагружаю верх страницы с ящика v-навигации, а v-content меняет верх с 64px на 128px, перед тем как начать сеанс, я не не понимаю ошибку.
<v-app-bar :clipped-left="clipped" fixed app>
<span class="hidden-lg-and-up">
<v-app-bar-nav-icon @click.stop="drawer = !drawer" />
</span>
<v-toolbar-title v-text="title" />
<v-spacer />
<v-responsive max-height="50" max-width="400">
<v-text-field
single-line
rounded
outlined
dense
v-model.lazy="search"
v-on:keyup.enter="submit"
style="justify:center;margin-top:2%"
label="Search"
@click:append="clearSearch"
append-icon="mdi-magnify"
></v-text-field>
</v-responsive>
<v-spacer />
<v-btn
v-if="JSON.stringify($store.state.localStorage.userEnd) === '{}'"
style="margin-right:5%"
:to="'/login'"
icon
>
<span>Inicia sesión</span>
<v-icon>mdi-account</v-icon>
</v-btn>
<v-menu offset-y>
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
v-if="JSON.stringify($store.state.localStorage.userEnd) != '{}'"
style="margin-right:5%"
icon
>
<span
>Bienvenido, {{ $store.state.localStorage.userEnd.alias }}</span
>
<v-icon>mdi-account</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item @click="logout">
<v-list-item-title>Cerrar Sesión</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-btn
style="margin-right:5%"
@click.stop="rightDrawer = !rightDrawer"
icon
>
<v-badge>
<template v-slot:badge>
<span color="green">{{ $store.state.localStorage.cantidad }}</span>
</template>
<v-icon>mdi-cart-outline</v-icon>
</v-badge>
</v-btn>
</v-app-bar>
<v-navigation-drawer
style="position:fixed!important"
v-bar
fixed
app
:clipped="clipped"
v-model="drawer"
>
<v-list-item>
<v-list-item-content>
<v-list-item-title class="title">
<h3>CATEGORIAS</h3>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list dense nav>
<v-list-group v-for="(item, index) in familias" :key="index" link>
<template v-slot:activator>
<v-list-item
:to="'/productos/' + createSlug(item.descripcion)"
style="max-width:175px;min-width:172px"
>
<v-list-item-icon>
<img
class="product-image-edit"
:src="item.ruta != '/' ? item.ruta : defaultImg"
alt="UPLOAD"
/>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title
class="item-text"
v-text="item.descripcion"
></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<v-list-item
v-for="(subItem, index) in item.subFamilias"
:key="index"
style="padding-left: 50px"
:to="
'/productos/' +
createSlug(item.descripcion) +
'/' +
createSlug(subItem.descripcion)
"
link
>
<v-list-item-action>
<img
class="product-image-edit"
:src="subItem.ruta != '/' ? subItem.ruta : defaultImg"
alt="UPLOAD"
/>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ subItem.descripcion }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
</v-list>
</v-navigation-drawer>
<v-content>
<v-container>
<nuxt />
</v-container>
</v-content>
<v-navigation-drawer
disable-resize-watcher
width="400px"
v-model="rightDrawer"
:right="right"
temporary
fixed
>
<v-list>
<v-list-item v-if="$store.state.localStorage.cantidad === 0">
<v-container>
<v-layout>
<img class="responsive-img" :src="empty" alt="UPLOAD" />
</v-layout>
<v-layout row wrap align-center>
<v-flex class="text-xs-center">
<h1 class="font-weight-black">
El carrito de compras está vacío
</h1>
</v-flex>
</v-layout>
<v-layout row wrap align-center>
<v-flex class="text-xs-center">
<h3 style="margin-left: 25%;">Agrega tu primer producto</h3>
</v-flex>
</v-layout>
<v-layout>
<v-flex class="text-xs-center">
<v-btn
style="margin-left: 25%;"
@click="rightDrawer = false"
color="green"
dark
>COMPRAR AHORA
</v-btn>
</v-flex>
</v-layout>
</v-container>
</v-list-item>
<v-list-item v-if="$store.state.localStorage.cantidad > 0">
<v-layout wrap>
<v-flex>
<perfect-scrollbar style="min-height:500px;max-height:450px;">
<v-container>
<v-layout
v-for="(item, index) in $store.state.localStorage.product"
:key="index"
>
<v-card
elevation="5"
style="margin-top:5%"
class="mx-auto"
max-width="344"
outlined
>
<v-list-item three-line>
<v-list-item-content>
<div class="overline mb-4">{{ item.productId }}</div>
<h4>{{ item.descripcion }}</h4>
<v-list-item-subtitle class="font-weight-black"
><v-layout>
Valor unitario: ${{ item.precioVenta }} </v-layout
><v-layout v-if="item.cantidadCarrito > 1">
Total: ${{
item.precioVenta * item.cantidadCarrito
}}</v-layout
>
</v-list-item-subtitle>
<v-layout>
<v-btn
@click="removeProduct(item)"
color="green"
icon
dark
>
<v-icon size="30"
>mdi-minus-circle-outline</v-icon
></v-btn
>
<h3
style="margin-top:3%;margin-left: 3%;"
v-text="item.cantidadCarrito"
></h3>
<v-btn
style="margin-left: 3%;"
@click="addProduct(item)"
color="green"
icon
dark
>
<v-icon size="30"
>mdi-plus-circle-outline</v-icon
></v-btn
>
<v-btn
@click="removeAll(item)"
style="margin-right:5%"
icon
>
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-layout>
</v-list-item-content>
<v-list-item-avatar tile size="80" color="grey"
><v-img
:src="item.imagen != '/' ? item.imagen : defaultImg"
></v-img
></v-list-item-avatar>
</v-list-item>
</v-card>
</v-layout>
</v-container>
</perfect-scrollbar>
</v-flex>
<v-flex>
<v-divider style="margin-top:10%"></v-divider>
<v-layout
style="box-sizing: border-box;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);background:#F7F7F7;"
>
<v-flex><h2>Total:</h2></v-flex
><v-flex
><h2 style="color:red">
${{ $store.state.localStorage.total }}
</h2></v-flex
>
</v-layout>
<v-layout wrap style="margin-top:5%; margin-left:15%;">
<v-btn rounded @click="rightDrawer = false" color="red" dark>
Cerrar</v-btn
>
<v-btn
rounded
style="margin-left:5%"
@click="(rightDrawer = false), checkout()"
color="green"
dark
>Comprar</v-btn
>
</v-layout>
</v-flex>
</v-layout>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-footer :fixed="fixed" app>
<span>© 2019</span>
</v-footer>
Перед перезагрузкой Когда я перезагружаюсь
также я стараюсь поставить топ: 64px! важно, но если я положу его, когда он скрыт на мобильном телефоне, он должен быть в 0px, а не в 64px ...