Question

我正在尝试通过api调用让Vue更新值。我记录了两次搜索：在beforeCreate之外和在inside之前。在它之外，它会在正确的新值中提供“搜索”的初始值。

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

<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。

根据{{3}}，

beforeCreate在组件中的任何内容被初始化之前触发：

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

我还没有测试过，但我愿意打赌这是你的问题。由于没有初始化的观察者或数据结构，您对vm。$ set（vm，＆＃39;搜索＆＃39;，数据）的调用被组件数据结构覆盖

在初始化数据和事件/观察者之后调用docs：

在安装开始之前调用：渲染函数即将首次调用。

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

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);
},

ajax调用beforeCreate不会更新数据

1 个答案: