0

Как переписать этот код в Composition API (VUE JS)? setup() {...}

<template>
  <transition name="fade">
    <div v-if="show" class="preloader">
      <h2>Loading...</h2>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'preloader',
  data(){
    return {
      show: true
    }
  },
  mounted(){
    if(Boolean(this.show)) this.showToggle()
  },
  methods: {
    showToggle(){
      setTimeout(() => {
        this.show = false
      }, 700)
    }
  }
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

1

1 ответ 1

0

Есть такое решение. Возможно есть более элегантный вариант

<script>
import { ref } from 'vue'

export default {
  name: 'preloader',
  setup(){
    let show = ref(true)

    const showToggle = () => {
      setTimeout(() => {
        show.value = false
      }, 1000)
    }

    return {
      show, showToggle
    }
  },

  mounted(){
    if(Boolean(this.show)) this.showToggle()
  }
}
</script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.