невозможно обновить данные vue внутри функции при получении?

Question

Я новичок в VueJs .Это laravel 6.0 , я не очень разбираюсь в переменных областях в javascript, но, думаю, что-то здесь не хватает.

Когда я пишу "self.msg='hello world'" вне выборки, все работает нормально.

Проблема здесь: даже после установки "self.msg = 'hello world'" внутри .then () это не такотразиться изнутри.означает, что переменная 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 не подозревает, что вы инициировали «перерисовку».У вас есть два варианта:

1. Вы можете использовать хук жизненного цикла mounted() ( Vue Lifecycle Hooks ), и тогда ваши данные будут запрошены, как только Vue.js установит компоненти тогда он узнает, как сбросить эту точку данных.
2. Вы можете вызвать функцию this.nextTick() ( nextTick (), читающую ), чтобы заставить Vue.js "перерисовать" пользовательский интерфейс.

Это все еще предположение, но это то, что я видел до сих пор при работе с HTTP и хуками жизненного цикла Vue.js.