Vue3 Switch ViewComponent Infinite times on a timer-CodePudding

I have 2 view components with a variable in my data that is a boolean working that can switch back and forth on a button click,

Instead of a button click I would like this boolean variable to switch T / F Back and forth every 10 seconds for an infinite time.

When this prop / data value changes then on the App.vue page my viewcompnente should switch accordingly with this property data value.

I'm not sure if I should be using setTimeout() in created, or if it should just be a methods : { then have a .then() after the setTimeout() and put this in a loop? Here is stuff I been trying ignore the variable names they should all be 'show' for this post but I been trying many different examples to try to get this to work.

        <div v-if="show">
            <span> IF </span>
            <Display />
        </div>
        <div v-else>
            <HelloWorld msg="Welcome to Your Vue.js App" />
        </div>
<script>
    import { ref } from "vue"
    const show = ref(true)
export default {
    name: 'App',
    components: {
        HelloWorld,
        Display
    },
    data() {
        return {
            show: true
        }
    },
 created() {

            setTimeout(async () => {
                console.log("Inside created()");

            })
            //setTimeout(() => {
            //    console.log("F");
            //    this.myVal = false, 5000
            //})
            //    //.then()
            //    .then(setTimeout(() => {
            //        //console.log("F")
            //        this.myVal = true, 5000
            //    }))

            //startVue() {
            //    let timer = timerFunction();

            //    //timer
            //    //    .then(function () {

            //    //    });
            //}
                //.then(this.myVal = true, 5000)
                //.then(this.myVal = false, 5000);
            //.catch(r => console.log(r))
        },
    methods: {
        //toggleDisplay() {
        //    show === true ? false : true;
        //    alert('test');
        //}
        toggleShow() {
            alert('test');
            if (showProp) {
                this.showProp = false;
            } else {
                this.showProp = true;
            }

        },

CodePudding user response：

Like commented, use setInterval :

const app = Vue.createApp({
  data() {
    return {
       show: true
    }
  },
  created() {
    setInterval(() => {
      this.show = !this.show
    }, 3000)
  }
})
app.component('Display', {
  template: `
    <div>Display</div>
  `
})
app.component('halloWorld', {
  template: `
    <div>HalloWorld</div>
  `
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-if="show">
    <Display />
  </div>
  <div v-else>
    <hallo-world msg="Welcome to Your Vue.js App" />
  </div>
</div>