Блог

Главная - Вопросы по программированию - Компоненты Vue по инерции с Laravel, похоже, загружаются дважды

Компоненты Vue по инерции с Laravel, похоже, загружаются дважды

#laravel #vue.js #inertiajs

Вопрос:

В недавно созданном проекте Laravel с инерцией и Vue у меня есть ошибка, из-за которой он дважды запускает код внутри моих компонентов vue.

Для простой тестовой демонстрации у меня есть Test.vue с этим кодом

 <template>
<div>
    TEST
</div>
</template>

<script>
export default {
    name: "Test",
    mounted() {
        console.log('test')
    }
}
</script>

<style scoped>

</style>

Маршрут в web.php:

 Route::get('/test', array(AppHttpControllersDashboardController::class, 'test'));

В контроллере:

     public function test(): Response
    {
        return Inertia::render('Test');
    }

Когда я перехожу к маршруту /тесту, он дважды повторяет «тест», установленный в моей консоли. В более продвинутых компонентах, которые вызывают API и тому подобное, также вызывает их дважды.

введите описание изображения здесь

Я подозреваю, что, возможно, мой проект настроен неправильно, в app.blade.php или app.js но не могу этого понять.

Я последовал за гидами дальше https://inertiajs.com/server-side-setup и https://inertiajs.com/client-side-setup чтобы все это устроить.

Мой исходный код находится здесь: https://github.com/ekstremedia/laravel-inertia

Редактировать: Кажется, что он повторяется только дважды в первом загружаемом компоненте. Если я в этом компоненте свяжусь с другим компонентом и перейду туда, он не загрузит это дважды.

Ответ №1:

Я обнаружил, что это решается путем изменения вашего app.js файл в вашем каталоге ресурсов, таким образом:

 import Vue from 'vue'
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue'


Vue.use(InertiaPlugin)

new Vue({
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            },
        }),
}).$mount(app);

Похоже, ваша проблема заключалась в том, как вы инициализировали свое приложение inertion.

Метки: , ,