VueJS получает данные до рендеринга шаблона

Question

VueJS получает данные до рендеринга шаблона

1

У меня есть компонент vue, который должен отображать и обрабатывать параметры фильтра для результатов, показанных на сайте.

В приведенном ниже коде показана часть моего компонента. В этом примере пользователь может установить минимальную и максимальную цену. Поскольку мой фильтр обрабатывается бэкэнд, я хочу получить всю доступную опцию фильтра (или фильтры по умолчанию) до визуализации компонента.

К сожалению, я получаю следующее сообщение об ошибке: TypeError: Не удается прочитать свойство "мин" неопределенного.

СОСТАВНАЯ ЧАСТЬ

<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. Таким образом, шаблон отображается только при загрузке всех фильтров. Есть ли лучший способ, может быть, через обещания?

Brotzka 03 авг. 2018, в 14:20

Источник

1

Решение, которое вы предлагаете в своем вопросе (установка filter на false ), должно работать, почему вы не попробовали его?
Aurel Bílý 03 авг. 2018, в 11:54
0

Только что отредактировал вопрос ^^ но спасибо за ваш ответ!
Brotzka 03 авг. 2018, в 11:55
1

То, как вы это реализовали, вполне нормально, но вы можете столкнуться с несколькими ситуациями, одна из которых - обработка, когда результат из API пуст. Я предлагаю начать с использования другого значения для отслеживания выборки. Например: data.fetched = false . Оттуда вы можете сделать сообщение, информирующее пользователя о том, что данные не были извлечены, а другое сообщение о том, что они были извлечены, но не было записей и т. Д.
David Lartey 03 авг. 2018, в 12:05
0

Изучите этот пример на jsFiddle, это аналогичная реализация моего комментария: jsfiddle.net/adamwathan/xov6ksvd
David Lartey 03 авг. 2018, в 12:06
0

Попробуйте использовать для beforeRouteEnter: function(to, from, next) .
Anwar 03 авг. 2018, в 12:48

Показать ещё 3 комментария

Теги:

javascript

vue.js

promise

1 ответ

Ещё вопросы

Решение, которое вы предлагаете в своем вопросе (установка filter на false ), должно работать, почему вы не попробовали его?
Только что отредактировал вопрос ^^ но спасибо за ваш ответ!
То, как вы это реализовали, вполне нормально, но вы можете столкнуться с несколькими ситуациями, одна из которых - обработка, когда результат из API пуст. Я предлагаю начать с использования другого значения для отслеживания выборки. Например: data.fetched = false . Оттуда вы можете сделать сообщение, информирующее пользователя о том, что данные не были извлечены, а другое сообщение о том, что они были извлечены, но не было записей и т. Д.
Изучите этот пример на jsFiddle, это аналогичная реализация моего комментария: jsfiddle.net/adamwathan/xov6ksvd
Попробуйте использовать для beforeRouteEnter: function(to, from, next) .

Aurel Bílý · Answer 1 · 2018-08-03T09-43-00.000Z

Ваше существующее решение неплохое. В целом, ваш рендеринг шаблонов не должен быть связан с извлечением данных - рассмотрим случай, когда сервер занимает много времени, чтобы ответить или хуже, по какой-то причине совершенно недоступен. В этом случае вы должны показать хотя бы прядильщик.

Таким образом, это означает, что любая логика отображения есть, это должно быть сделано "вручную" и не должно быть связано с жизненным циклом 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();
    }
}