In my code I have several conditionally rendered components and tab menu which defines the active one. Each component has its own logic for loading the part of content after user pushes the button inside of them.
I have a problem on production mode.
If I load all parts of content for component-1, select component-2, than come back - component-1 keep the state and show me all parts of content despite that I put {preserveState: false}
in Inertia.get()
Same behavior if I just change the active tab
But at the same time {preserveState: false}
works well in dev mode.
<template>
<div>
<section>
<navigation-element :element="element" v-for="element in navigation @clicked="changeActive" />
</section>
<!-- lesson's tabs -->
<lintro class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('intro') >= 0" />
<ldictionary class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('dictionary') >= 0" />
<lclass class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('class') >= 0" />
<ltools class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('tools') >= 0" />
<lexam class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('exam') >= 0" />
<lpractice class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('practice') >= 0" />
</div>
</template>
<script setup>
import {ref, computed, onMounted, reactive} from 'vue'
import { Inertia } from '@inertiajs/inertia'
import navigationElement from '@/Pages/modules/navigationElement.vue'
import lintro from '@/Pages/lesson/_intro.vue'
import ldictionary from '@/Pages/lesson/_dictionary.vue'
import lclass from '@/Pages/lesson/_class.vue'
import ltools from '@/Pages/lesson/_tools.vue'
import lexam from '@/Pages/lesson/_exam.vue'
import lpractice from '@/Pages/lesson/_practice.vue'
const props = defineProps(['lesson', 'tab', 'course', 'course_progress'])
const navigation = ref([
{id: 0, action: 'intro', name: 'Intro'},
{id: 1, action: 'dictionary', name: 'Dictionary'},
{id: 2, action: 'class', name: 'Class'},
{id: 3, action: 'tools', name: 'Tools'},
{id: 4, action: 'exam', name: 'Quizess'},
{id: 5, action: 'practice', name: 'Assignment'},
])
function changeActive(input) {
Inertia.get(window.location.pathname, {tab: input.action}, {preserveState: false, preserveScroll: true });
}
</script>