Vue.js：尽管有条件渲染，元素仍会显示片刻

Posted 2023-02-22

【中文标题】Vue.js：尽管有条件渲染，元素仍会显示片刻

【英文标题】：Vue.js: Element is shown for a moment despite of conditional rendering

【发布时间】：2019-03-21 20:06:21

【问题描述】：

我有一个导航按钮，可以切换菜单和登录按钮。

当用户未经授权时，他只能看到登录按钮。当用户登录时，该按钮消失，他/她可以看到一个切换用户菜单的汉堡按钮。

我有一个基于属性isLoaded 的条件，它可以是假或真，取决于 API 响应（登录后是否加载了配置文件数据）。它可以正常工作，但是当我重新加载页面并在登录过程后重定向到主页后，SignIn 按钮会出现片刻。我想知道如何避免这种情况。

我怀疑这个按钮是在应用程序等待 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;
  ,
 ,
;

【问题讨论】：

只需为getProfile.isLoaded 设置一个默认值。因此，当它等待数据时，你有一个默认的元素现在显示。

感谢您的回答。此属性已具有默认值false。当我创建一个具有突变的动作时，它被切换到true。此突变将isLoaded 切换为true。

【参考方案1】：

您的按钮完全按照您的指示行事。

  <router-link :to=" name: 'login' "
               class="sign-in-button"
               v-if="!getProfile.isLoaded">

当getProfile.isLoaded 为假时，您正在显示它。这也是你的默认状态。

我个人会将isloaded 与配置文件数据分离。使用loadingfinished 数据属性（或$store 属性）

您真正想要的是仅在满足两个条件时才显示该按钮：

加载完成

您知道该用户未登录。

【讨论】：

感谢您的回答。我从商店添加了我的代码。不幸的是，这个解决方案对我没有任何改变。 :(

@OlgaB 您的商店代码看起来不错。您如何在视图组件方法中调用它？

@OlgaB - 我根据您的代码编辑了我的答案。希望对您有所帮助。

非常感谢您的建议。我将此标记为解决方案，但我更喜欢在 main.js 中创建一个方法，在其中检查我是否有令牌。然后我使用了基于这种方法的 v-if 指令。它工作得很好。 :)

不客气。一种检查方法听起来比我在这里展示的更彻底 - 但对于 *** 上的其他读者来说，像我这样的简单答案更好。开发人员总是可以自己使事情复杂化。