Vue.js component do not change its HTML output by its data

Question

Firstly, I have a sub-component like this:

Vue.component("banana", {
    props: {bid: Number} // bid: means Banana's id
    data () {
        return {
            OK: true
        }
    },
    mounted () {
        this.do_a_sync_thing() // do a sync function when it is mounted
    },
    methods: {
        do_a_sync_thing () {
            setTimeout(function() {
                this.OK = true // [ERROR]: WHY the output do not change to {{ pid }} 
                               //          but still is "NO OK, Loading..."
            })
        }
    },
    template: `
        <div>
            <template v-if="OK">
                {{ bid }}
            </template>
            <template v-else>
                NO OK, Loading...
            </template>
        </div>`
})

Then I text this in HTML file:

<banana id="app" :bid="8"></banana>

And this in JS file:

var app = new Vue({
    el: "#app",
    data: {}
})

So the question is: why the template output do not change after I change its data?

Thank you. ( •̀ ω •́ )✧

Function has its own this context, bind context, or arrow

Estradiaz
– Estradiaz

2020-08-08 06:46:05 +00:00
Commented Aug 8, 2020 at 6:46 — Estradiaz
– Estradiaz, Commented Aug 8, 2020 at 6:46
Thanks you @Estradiaz ~ I think I get it~

Peterlits Zo
– Peterlits Zo

2020-08-08 06:55:39 +00:00
Commented Aug 8, 2020 at 6:55 — Peterlits Zo
– Peterlits Zo, Commented Aug 8, 2020 at 6:55

akuiper · Accepted Answer · 2020-08-08 06:48:57Z

2

In setTimeout, the anonymous function override this, so this in the function doesn't point to the Vue component anymore. You can use an arrow function to avoid the override:

do_a_sync_thing () {
    setTimeout(() => {
        this.OK = true 
    })
}

answered Aug 8, 2020 at 6:48

akuiper

216k33 gold badges363 silver badges380 bronze badges

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

Collectives™ on Stack Overflow

Vue.js component do not change its HTML output by its data

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