时间戳

首页 > 解决方案 > Vue.js 组件不会通过其数据更改其 HTML 输出

javascript - Vue.js 组件不会通过其数据更改其 HTML 输出

问题描述

首先，我有一个像这样的子组件：

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>`
})

然后我在 HTML 文件中发短信：

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

这在 JS 文件中：

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

所以问题是：为什么模板输出在我改变它的数据后没有改变？

谢谢你。( •̀ ω •́ )✧</p>

标签： javascriptvue.js

解决方案

in setTimeout，匿名函数 override this，所以thisin 函数不再指向 Vue 组件。您可以使用箭头函数来避免覆盖：

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

推荐阅读