Как убрать компонент при полной загрузке страницы?

Question

[Александр]

Здравствуйте! Я хочу при полной загрузке страницы убирать один компонент с страницы и отображать другой
В событии created() прописываю
is_loaded(контент): false, is_loaded_1(спиннер): true
Далее в mounted() прописываю
is_loaded(контент): true, is_loaded_1(спиннер): false
Правильно ли я делаю?
Код из App.vue:

<template>
  <div id="app">
    <hello v-show="is_loaded"></hello>
    <rotate-square2 v-show="is_loaded_1"></rotate-square2>
  </div>
</template>

<script>
  import {RotateSquare2} from 'vue-loading-spinner'
  import hello from './components/HelloWorld'

export default {

  name: 'app',
  components: {
    RotateSquare2,
    hello
  },
  data: () => ({
    is_loaded: false,
    is_loaded_1: true
  }),

  created() {
    console.log(this.is_loaded_1)
  },

  mounted() {
   is_loaded: false,
    is_loaded_1: true

    console.log(this.is_loaded_1)
  }
}
</script>

<style>
.spinner {
  width: 80px!important;
  height: 80px!important;
  margin: 200px auto;
}
</style>

Comments

[shmatuan]

В mounted - this.is_loaded = true;
Зачем вторая переменная?

[Александр]

shmatuan, чтобы контент появился, у меня на блоке с контентом стоит v-show="is_loaded"

[shmatuan]

Александр, Ага, но одной достаточно) is_loaded_1 лишнее

[Александр]

shmatuan, а как мне вырубать спиннер?

[shmatuan]

Александр,

<hello v-show="is_loaded"></hello>
    <rotate-square2 v-show="!is_loaded"></rotate-square2>

mounted() {
   this.is_loaded = true;
  }

[Александр]

shmatuan, аа, ну это я потом бы думаю уже догадался) А так да, спасибо)

Answer 1

[Андрей Седышев]

Можно использовать v-cloak, как здесь: https://medium.com/vuejs-tips/v-cloak-45a05da28dc4

Comments

[Александр]

Рассматривал этот вариант, но все таки можно ли как-то мой вариант сделать рабочим? И правильно ли это?

Answer 2

[shmatuan]

mounted() {
   this.is_loaded = true;
   this.is_loaded_1 = false;

    console.log(this.is_loaded_1)
  }