Question

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

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

不幸的是，我收到以下错误消息：TypeError：无法读取未定义的属性“ min”。

组件

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

JS

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

Answer 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();
    }
}

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

1 个答案: