Question

我是 VueJs 的新手。这是 laravel 6.0 ，我对javascript中的变量作用域了解不多，但是我想我在这里遗漏了一些东西。

当我在抓取操作之外写入"self.msg='hello world'"时，效果很好。

问题在这里：即使在.then（）中设置“ self.msg ='hello world'”后，它也不会在视图中反映出来。表示'msg'变量未更新。

<div class="main" >
    <div class="test"> {{ msg }} </div>
    <!-- output:test  -->
</div>

export default {
    name:"word-list",
    data() { 
        return {
            msg: 'test'
        }
    },
    created() {
        this.fetchWords();
    },
    methods: {

        fetchWords() {

            let self = this;
            console.log(self.msg);//output: test
            fetch("getAllWords")
            .then(res => res.json())
            .then( res => {
                console.log(self.msg);//output: test
                self.msg = "hello world"
                console.log(self.msg);//output: hello world
            })
            .catch((error) => console.log(error) );
            console.log(self.msg);//output: test
        }
    }
}

Answer 1

您的问题在这里（可能）是由于您在呈现组件之前调用fetchWords()函数，而不是在检索数据后告诉它重新呈现。到那时，Vue还不知道您正在触发“重新绘制”。您有两种选择：

您可以使用mounted()（Vue Lifecycle Hooks）生命周期挂钩，然后在Vue.js挂载组件后立即请求您的数据，然后它将重置该数据点。
您可以调用this.nextTick()函数（nextTick() reading）来强制Vue.js“重绘” UI。

这仍然是一个猜测，但这是我到目前为止在处理HTTP和Vue.js生命周期挂钩时看到的。

获取时无法更新函数内部的vue数据？

1 个答案: