时间戳

首页 > 解决方案 > VueJS 在模板渲染之前获取数据

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

问题描述

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

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

不幸的是，我收到以下错误消息：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 €&lt;/option>
                    <option value="500">500 €&lt;/option>
                    <option value="750">750 €&lt;/option>
                    <option value="1000">1000 €&lt;/option>
                    <option value="1500">1500 €&lt;/option>
                </select>
                <select class="form-control" id="max_price" v-model="filter.price.max"
                        v-on:change="countResults">
                    <option value="250">250 €&lt;/option>
                    <option value="500">500 €&lt;/option>
                    <option value="750">750 €&lt;/option>
                    <option value="1000">1000 €&lt;/option>
                    <option value="1500">1500 €&lt;/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？

标签： javascriptvue.jspromise

解决方案

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

所以这意味着无论有什么显示逻辑，都应该“手动”完成，而不应该与 Vue 生命周期联系起来，即 withv-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();
    }
}

推荐阅读