Laravel 提取时无法更新函数内的vue数据？

我是新来的VueJs。这是Laravel6.0，我对javascript中的变量作用域知之甚少，但我想我在这里遗漏了一些东西

当我在fetch外部编写“self.msg='hello world'”时，它工作正常

问题是： 即使在将“self.msg='hello world'”设置为inside.then（）之后，它也不会在视图中得到反映。表示未更新“msg”变量

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

这里的问题（很可能）是因为您在组件呈现之前调用了

fetchWords（）

函数，但没有告诉它在检索数据之后重新呈现。到那时，Vue还不知道您触发了“重画”。您有两个选择：

您可以使用

mounted（）

（）生命周期钩子，然后Vue.js一装载组件就会请求您的数据，然后它就会知道如何重置该数据点

您可以调用

this.nextTick（）

函数（）强制Vue.js“重画”UI

---

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

这里的问题是什么？如果您问为什么

self.msg

的值在末尾是

'test'

，那是因为

fetch

是异步的，所以行在

然后
回调之前运行。所有回调完成后，self.msg应为
'hello world'
，这将触发模板重新运行以反映新值。是的，但最后新值应反映在视图模板中。顺便说一句，谢谢你的回复。你能不能编辑一下这个问题，让它清楚地说明问题是什么？现在还不清楚你在问什么。inside created（）write this.msg='It works'并查看视图是否更新？@FidaHasan是的，如果我在created（）内部或外部fetch调用（在fetchWords（）方法中）中写入它，它会得到正确更新。
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
        }
    }
}