VueJs视图在array.push()

时间:2018-09-14 12:47:39

标签: javascript vue.js

这是我的观点

<div class="store-list" id="store-list">
<div class="store-list__store" v-for="store in stores">
    <div class="store-list__store--info">
        <h5 class="store-list__store--address">
            {{store.address}}
        </h5>
        <div class="store-list__store--meta">
            <i class="icon-location-store-small"></i>
            <span class="store-list__store--type">
                {{store.type}}
            </span>
            <span class="store-list__store--distance">
                <i class="icon-location"></i>
                {{store.distance}} km
            </span>
        </div>
    </div>
    <div class="store-list__store--picker store-list__store--stockstatus">
        <p class="store-list__store-stockstatus store-list__store-stockstatus--instock" v-if="store.stock">
            <i class="icon-check"></i>
            I lager
        </p>
        <p class="store-list__store-stockstatus" v-else>
            <i class="icon-remove"></i>
            Ej i lager
        </p>
        <a class="store-list__store--pick-store js-go-store">Välj butik</a>
    </div>
</div>

这是我的Vue实例,应该创建一个来自Ajax调用的存储列表。在第一次调用时,将创建列表,但是每当我搜索一组新存储时,阵列就会发生更改和更新。 console.log会显示每个调用的更改,但是呈现的视图保持不变。

const storeListVm = new Vue({
        el: '#stock-status',
        data() {
            return {
                stores: [],
                openhoursToday: '',
                showOnlyInStock: true
            };
        },
        methods: {
            fetchStoresWithStock: function() {
                $.ajax({
                    url: dataUrl,
                    dataType: 'json',
                }).done((data) => {
                    for(let i = 0; i < data.facilities.length; i++) {
                        this.stores.push(data.facilities[i]);
                    };

                    console.log(this.stores);
                });
            }
        }
});

有人可以帮我弄清楚数组为什么更改但视图没有更改吗?我也尝试过Vue.set

0 个答案:

没有答案