Vue.js：盡管有條件渲染，元素仍然顯示了片刻

Question

我有一個帶有按鈕的導航，該按鈕可切換菜單和登錄按鈕。

未授權用戶時，他只能看到“登錄”按鈕。 當用戶登錄時，該按鈕消失，並且他/她可以看到一個切換用戶菜單的漢堡包按鈕。

我有一個基於屬性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;
  },
 },
};

Answer 1

您的按鈕正在執行您要告訴的操作。

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

如果getProfile.isLoaded為false，則在顯示它。 這也是您的默認狀態。

就我個人而言，我會從配置文件數據中分離出isloaded 。 使用loadingfinished數據屬性（或$store屬性）

您真正想要的是僅在滿足兩個條件時才顯示該按鈕：

1. 加載完成

2. 您知道該用戶尚未登錄。