beforeCreate 中的 ajax 调用不更新数据

Question

我正在尝试让 Vue 通过 api 调用来更新值。我记录了两次搜索：beforeCreate 之外的搜索和内部搜索。在外部它给出“搜索”的初始值，在正确的新值内部。

主要问题是我没有看到更新的值。

<div id="app">
        <!-- shows when there are no searches -->
        <p class="text-center" v-if="searches === null">Er werden nog geen zoekopdrachten uitgevoerd.</p>

        <!-- this div gets repeated for every search -->
        <div class="search border border-info rounded p-3 m-3 row" v-for="search in searches">
            <table class="col-6">
                <tr>
                    <td class="text-info">Zoekwoorden</td>
                    <td v-for="keyword in search.keywords">@{{ keyword }}</td>
                </tr>
                <tr class="even">
                    <td class="text-info">Platforms</td>
                    <td v-for="platform in search.platforms">@{{ platform }}</td>
                </tr>
                <tr>
                    <td class="text-info">Gerelateerde zoekwoorden</td>
                    <td v-for="keyword in search.all_keywords">
                        @{{ keyword }}
                    </td>
                </tr>
                <tr class="even">
                    <td class="text-info">Locatie</td>
                    <td>Voskenslaan, Gent</td>
                </tr>
                <tr>
                    <td class="text-info">Datum</td>
                    <td>@{{ search.created_at }}</td>
                </tr>
            </table>
            <div class="col-6 text-right">
                <button type="button" class="close" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h3 class="search-id text-secondary">#@{{ search.id }}</h3>
                <a :href="'/searches/' + search.id " role="button" class="btn btn-info details-button">Details...</a>
            </div>
        </div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var $root = new Vue({
            el: '#app',
            data:
                {
                    searches: [
                        { id: 123, keywords: ['sample', 'sample'], platforms: ['sample', 'sample'] },
                        { id: 123, keywords: ['sample', 'sample'], platforms: ['sample', 'sample'] }
                    ]
                },
            beforeCreate: function ()
                {
                    var vm = this;
                    $.get("api/searches", function(data, status){
                        vm.$set(vm,'searches', data);   //zet de waarde van searches gelijk aan de opgehaalde
                        console.log(vm.searches);       //geeft juiste opgehaalde searches
                    });
                }
        });

        console.log($root.searches);    //geeft de initiële twee sample searches
    </script>

Answer 1

我认为您可能想尝试使用 beforeMount 而不是 beforeCreate。

beforeCreate 在组件中的任何内容初始化之前触发，根据docs：

在实例初始化后立即同步调用，在数据观察和事件/观察器设置之前。

我还没有测试过，但我愿意打赌这是你的问题。由于没有初始化观察者或数据结构，因此您对 vm.$set(vm,'searches', data) 的调用将被组件数据结构覆盖

而 beforeMount 在数据和事件/观察者被初始化后被调用：

在挂载开始前调用：即将第一次调用渲染函数。

我也可能只是推送到现有数组而不是像这样替换它（特别是如果您已经填充了示例中的搜索数组）：

beforeMount: function () {
                var vm = this;
                $.get("api/searches", function(data, status){
                    vm.searches.push(...data); // assuming data is an array
                    console.log(vm.searches); 
                });
},
mounted: function(){
                var vm = this;
                console.log(vm.searches);
},