wait for a job finished to render component in vuejs

Question

I have a component here, and I need first to make a request using socket.io :

<template>
    <h1>Don't show me before the socket's response</h1>
</template>

<script>
    export default {
        beforeCreate: function() {
            let sessid = this.$cookie.get('sessid')
            this.$options.sockets.logout = (data) => {
                if (data.redirect) {
                    this.$router.push(data.redirect)    
                } else {
                    console.log('here, you can render the template')
                }
            }
            this.$socket.emit('logout', { sessid })
        }
    }
</script>

This code works, but it shows the template in browser for a quick moment, before the redirection happens.

I would like to know if there's a tick to wait the socket response for rendering the template.

tony19 · Accepted Answer · 2022-07-16 01:27:39Z

1

You can use v-if, when the socket response arrives, you can set a variable which can be used with v-if to not show the HTML, something like following:

<template>
    <h1 v-if="sockResp">Don't show me before the socket's response</h1>
</template>

<script>
    export default {
        data: function() {
           return {
             sockResp: false
           }
        },
        beforeCreate: function() {
            let sessid = this.$cookie.get('sessid')
            this.$options.sockets.logout = (data) => {
                if (data.redirect) {
                    this.$router.push(data.redirect)    
                } else {
                    console.log('here, you can render the template')
                    this.sockResp = true 
                }
            }
            this.$socket.emit('logout', { sessid })
        }
    }
</script>

edited Jul 16, 2022 at 1:27

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 15, 2017 at 13:18

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

wait for a job finished to render component in vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related