Как сделать, чтобы JS метод выполнятся после полного рендеринга страницы во Vue.js?

Question

[time_is_always_against_us]

Что делаю?
1. Ajax запрос к серверу через библиотеку axios. Получаю, к примеру, список машин (id -> name).
2. В цикле строю option для select.
3. К данному select применяю bootstrap-select. Он нужен, чтобы кастомизировать select:

В чем проблема?
JS скрип selectpicker не успевает дождаться, пока Vue.js отрендерит select-> option, считая, что там элементов нет.

Упрощенно код выглядит так:

<template>
    <div>
        <select name="cars" class="selectpicker">
            /* 2. Vue.js, получив данные, начал рендерить option */
            <option v-for="(val, key) in cars" :key="key" :value="key">{{val}}</option>
        </select>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                cars: []
            }
        },
        mounted() {
            axios.get('/info/car')
                .then((result) => {
                    this.cars = result.data; /* 1. Получили данные от сервера и записали в переменную. */
                    $('.selectpicker').selectpicker(); /* 3. Иногда не успевает дождаться рендеринга и 
в select не отображает элементы, ибо vue.js их еще не создал. */
                });
        }
    }
</script>

Upd:
this.$nextTick - не помог:


Доку прочитал, в теории это должно было решить проблему, но увы.
Подробнее опишу всю цепочку того, что реально происходит может быть ошибка в другом.
1. В модуле Vuex делаются запросы и получаются все списки всех select на сайте из БД.
2. Создаю computed свойство listCar и отслеживаю его в watch. Если изменится, значит данные с сервера загружены и можно применять selectpicker.

<template>
    <div>
        <select name="cars" class="selectpicker" id="carList">
            /* Использует computed listCar */
            <option v-for="(val, key) in listCar" :key="key" :value="key">{{val}}</option>
        </select>
    </div>
</template>

computed: {
            ...mapState(['list']), // Получили
            listCar() {
                return this.list.cars;
            }
        },

        watch: {
            listCar() { // Отслеживает, чтобы список с сервера уже был загружен.
                this.$nextTick(function () { // Ждем пока отрендерит.
                    $('#carList').selectpicker(); // Применяет selectpicker
                })
            }
        }

Answer 1

[0xD34F]

nextTick

И ещё вот такого

$('.selectpicker')

быть не должно. Вместо селектора используйте ссылку на элемент.

Comments

[time_is_always_against_us]

Спасибо за ответ! К сожалению, не помогло. Дополнил вопрос, возможно что-то упускаю в другом месте.

[0xD34F]

time_is_always_against_us, не понимаю, каким образом к этому

<select name="cars" class="selectpicker">

можно обратиться с помощью такого кода

$('#carList')

И так смотрю, и эдак - но никак не могу увидеть у select'а ничего, что напоминало бы id.

[time_is_always_against_us]

0xD34F, Прошу прощения за неточность, этот код написал специально для вопроса, чтобы изложить проблему.
Добавил:

<select name="cars" class="selectpicker" id="carList">

[0xD34F]

time_is_always_against_us, наличие класса selectpicker означает, что bootstrap-select будет инициализирован автоматически. Уберите класс, или вместо инициализации выполняйте обновление.

[time_is_always_against_us]

0xD34F, Пробовал раньше refresh, но не работало, а вот внутри nextTick помогло. Спасибо Большое!

Answer 2

[Антон Антон]

Упрощенно как-то так:
https://ru.vuejs.org/v2/api/#vm-nextTick

....
axios.get("/info/car").then(result => {
    this.cars = result.data; /* 1. Получили данные от сервера и записали в переменную. */
    this.$nextTick(function() {
        $(".selectpicker").selectpicker(); /* 3. Иногда не успевает дождаться рендеринга и 
в select не отображает элементы, ибо vue.js их еще не создал. */
    });
});
....

но лучше избавиться от jquery и прочего.

Comments

[time_is_always_against_us]

Спасибо за ответ! К сожалению, не помогло. Дополнил вопрос, возможно что-то упускаю в другом месте.

Answer 3

[ViperOMG]

Столкнулся с аналогичной проблемой в Nuxt 2.17

мое решение проблемы:

mounted() {
     this.refreshSelectPicker()
    },
 methods: {
        refreshSelectPicker() {
            $('.selectpicker2').selectpicker('render');
        },

P.s. Переименовал selectpicker в selectpicker2, чтобы не срабатывал автоматический рендеринг. В текущем коде select формируется только после формирования контента на странице.

p.p.s Для тех, кому нужно динамическое обновление bootstap select на основе каких-то параметров:

refreshSelectPicker2() {
            $('.selectpicker3').selectpicker('destroy');
            $('.selectpicker3').selectpicker('render');
        },

// дописываем к классу selectpicker2 еще один класс selectpicker3 и вместо выполнения render/refresh - удаляем и рендерим список заного, в противном случае может двоить и троить контент.