VueJS 在模板渲染之前获取数据答案

【问题标题】：VueJS get data before template renderingVueJS 在模板渲染之前获取数据
【发布时间】：2019-01-11 07:28:35
【问题描述】：

我有一个 vue 组件，它应该显示和处理网站上显示的结果的过滤器选项。

下面的代码显示了我的组件的一部分。在此示例中，用户可以设置最低和最高价格。因为我的过滤器是由后端处理的，所以我想在渲染组件之前获取所有可用的过滤器选项（或默认过滤器）。

不幸的是，我收到以下错误消息：TypeError: Cannot read property 'min' of undefined。

组件

<template>
    <div id="filter">
        <fieldset>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">Preis von - bis</span>
                </div>

                <select class="form-control" id="min_price" v-model="filter.price.min"
                        v-on:change="countResults">
                    <option value="0" selected="selected">beliebig</option>
                    <option value="250">250 €</option>
                    <option value="500">500 €</option>
                    <option value="750">750 €</option>
                    <option value="1000">1000 €</option>
                    <option value="1500">1500 €</option>
                </select>
                <select class="form-control" id="max_price" v-model="filter.price.max"
                        v-on:change="countResults">
                    <option value="250">250 €</option>
                    <option value="500">500 €</option>
                    <option value="750">750 €</option>
                    <option value="1000">1000 €</option>
                    <option value="1500">1500 €</option>
                    <option value="0" selected="selected">beliebig</option>
                </select>

            </div>
        </fieldset>
    </div>
</template>

<script>
    export default {
        name: "VehicleFilterComponent",
        data: function () {
            return {
                categories: [],
                filter: {}
            }
        },
        methods: {
            getDefaultFilter() {
                axios.get(this.$apiUrl + '/vehicles/default-filters')
                    .then(result => {
                        this.filter = result.data.filter;
                    }).catch(function (error) {
                    console.warn(error)
                });
            }
        },
        beforeMount() {
            this.getDefaultFilter();
        }
    }
</script>

有没有办法等到所有过滤器都加载完毕？

现在我使用v-if 并将过滤器数据默认设置为false。因此，仅在加载所有过滤器时才会呈现模板。有没有更好的方法，也许是通过 Promises？

【问题讨论】：

您在问题中提出的解决方案（将filter 设置为false）应该可行，您为什么不尝试一下？
刚刚编辑了问题^^但感谢您的回复！
你实现它的方式还不错，但是你可能会遇到一些情况，一种是当API的结果为空时处理。我建议，首先使用不同的值来监控获取。例如：data.fetched = false。从那里你可以呈现一条消息，告诉用户数据尚未被提取，另一个告诉他们它已被提取但没有条目，等等。
在 jsFiddle 上查看此示例，它与我的评论类似：jsfiddle.net/adamwathan/xov6ksvd
尝试使用beforeRouteEnter: function(to, from, next)。

标签： javascript vue.js promise

【解决方案1】：

您现有的解决方案还不错。一般来说，您的模板渲染不应该与数据检索相关联——考虑服务器需要很长时间才能响应或更糟，由于某种原因完全不可用的情况。在这种情况下，您至少应该显示一个微调器。

所以这意味着无论有什么显示逻辑，都应该“手动”完成，并且不应该与 Vue 生命周期链接，即与 v-if 等。

至于代码本身，你或许可以使用async / await 语法使其更清晰：

export default {
    name: "VehicleFilterComponent",
    data: function () {
        return {
            categories: [],
            filter: {}
        }
    },
    methods: {
        async getDefaultFilter() {
            this.filter = (await axios.get(this.$apiUrl + '/vehicles/default-filters')).data.filter;
        }
    },
    beforeMount() {
        this.getDefaultFilter();
    }
}

【讨论】：