[英]Vue.js: Element is shown for a moment despite of conditional rendering
我有一个带有按钮的导航,该按钮可切换菜单和登录按钮。
未授权用户时,他只能看到“登录”按钮。 当用户登录时,该按钮消失,并且他/她可以看到一个切换用户菜单的汉堡包按钮。
我有一个基于属性isLoaded
的条件,该条件在API响应上可以为false或true依赖(是否在登录后发生配置文件数据加载)。 它可以正常工作,但是当我重新加载页面时以及在登录过程后重定向到主页之后,登录按钮会出现片刻。 我不知道如何避免这种情况。
我怀疑在应用程序等待API响应时显示此按钮,并且一旦看到isLoaded: true
,它就会在检查条件后隐藏该按钮。
这是我的代码:
<v-toolbar app fixed dark color="light-blue lighten-2">
<user-nav-button v-if="getProfile.isLoaded"
@toggle-drawer="$refs.drawer.drawer = !$refs.drawer.drawer" />
<v-toolbar-title v-if="getProfile.isLoaded">
<router-link :to="{ name: '/' }"
class="white--text" >
APP
</router-link>
</v-toolbar-title>
<v-spacer></v-spacer>
<router-link :to="{ name: 'login' }"
class="sign-in-button"
v-if="!getProfile.isLoaded">
SIGNIN
</router-link>
</v-toolbar>
<profile-sidebar v-if="getProfile.isLoaded"
ref="drawer" />
<script>
export default {
data() {
return {
drawer: '',
};
},
components: {
UserNavButton,
ProfileSidebar,
MainFooter,
},
created() {
this.loadProfile();
},
computed: {
...mapGetters(['getProfile']),
},
methods: {
...mapActions(['loadProfile']),
},
};
<script>
我的商店:
export default {
state: {
profile: {
isLoaded: false,
data: [],
},
},
actions: {
loadProfile({ commit }) {
if (config.token !== '') {
http
.post('api')
.then(({ data }) => {
commit('SET_PROFILE', data);
});
}
},
},
mutations: {
SET_PROFILE(state, data) {
state.profile = {
isLoaded: true,
data,
};
},
},
getters: {
getProfile(state) {
return state.profile;
},
},
};
您的按钮正在执行您要告诉的操作。
<router-link :to="{ name: 'login' }"
class="sign-in-button"
v-if="!getProfile.isLoaded">
如果getProfile.isLoaded
为false,则在显示它。 这也是您的默认状态。
就我个人而言,我会从配置文件数据中分离出isloaded
。 使用loadingfinished
数据属性(或$store
属性)
您真正想要的是仅在满足两个条件时才显示该按钮:
加载完成
您知道该用户尚未登录。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.