Как сохранить значение, сохраненное в fetch (). - PullRequest
Новая
       15

Как сохранить значение, сохраненное в fetch ().

0 голосов
/ 30 октября 2019

Мне нужно обработать данные из файла JSON с использованием очень простого Vue без транспаранта и т. Д. Я нашел выборку как один из вариантов для этого. Однако переменная, в которую я сохраняю полученное значение, теряет это значение после завершения выборки. Как изменить этот код, чтобы сохранить значение, полученное из файла JSON. Я не привязан к извлечению, но мне нужно сохранить базовое значение Vue и не использовать функции стрелок.

Поделиться моим кодом ниже. Я использую VSCode.

Я сузил это до очень специфической проблемы, которую я вижу. Посмотрите журналы консоли для некоторых из моих сообщений отладки. 

let app = new Vue(
    {
        el: '#app',
        data:
        {
            persons: [],
            personDataURL: 'https://jsonplaceholder.typicode.com/users/1',
        },
        methods:
        {
            startLoad: function ()
            {
                fetch(this.personDataURL)
                    .then(function (response)
                    {
                        return response.json()
                    })
                    .then(function (json)
                    {
                        this.persons = json;
                        console.log('parsed inside fetch.then', this.persons.name);
                    })
                    .catch(function (error)
                    {
                        console.log('parsing failed: ', error)
                    });
                console.log('printed after fetch but within startLoad', this.persons.username);

            },
            printData: function ()
            {
                console.log('printed in printData', this.persons.username);
            }
        }
    }
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js' defer></script>
    <script src='testing.js' defer></script>
</head>

<body>
    <div id='app' v-cloak>
        <button v-on:click=startLoad>Start Load</button>
        <button v-on:click=printData>Print Data</button>
        Person Info: {{persons}}

    </div>
</body>
...