Issue with Vue 3 component not updating following vue-router invocation

Question

Issue with Vue 3 component not updating following vue-router invocation

I am currently working on developing a todo app using ionic-vue with vue 3. In my Lists.vue component, I have set up an overview where users can click on different lists to load tasks specific to each list. However, I am facing an issue where the same data is being displayed every time a list is clicked. It seems like the component is being reused but not properly re-rendered or updated.

I have attempted various solutions to address this issue, such as implementing a watch on the changing ref, but it did not yield the desired result. Even adding a :key to the router-link did not resolve the problem.

Below is a snippet of my Lists.vue component:

 // code snippet here...

In addition, I also have another component called Index.vue which displays individual list details:

 // code snippet here...

Furthermore, I have created a composable function to fetch data for the app:

 // code snippet here...

If anyone has any suggestions or insights on how to fix the issue I am facing, I would greatly appreciate your help. Thank you in advance for your valuable input!

Please note that I may not be able to respond quickly due to certain circumstances, but rest assured I will get back to your answers as soon as possible :)

javascript typescript vue.js vuejs3 ionic-vue

Answer 1

Answer №1

Finally cracked the code to my issue! Utilizing watchEffect on the loadValue method was the key to retrieving data from the database effectively. It appears that Vue prioritizes reusing components over rerendering them for better efficiency, a fact I discovered after delving into online research.

Although the route params were getting updated, the component's key remained stagnant.

The setup function within Index.vue (the task list)

 setup() {
        const router = useRouter()
        const route = useRoute()
        const { loadValue } = getValue()
        const category = ref()

        // Redirect back to lists when clicking on close icon.
        const redirectBack = () => {
            return router.push({name: 'Lists'})
        }
       
        // Fetching data of a specific category.
        const getCategory = () => {
            loadValue('categories', route.params.categoryId).then(data => {
                category.value = data
            })
        }

        watchEffect(() => {
            getCategory()
        })

        return {
            closeOutline,
            redirectBack,
            category,
        }

Answer 2

Finally cracked the code to my issue! Utilizing watchEffect on the loadValue method was the key to retrieving data from the database effectively. It appears that Vue prioritizes reusing components over rerendering them for better efficiency, a fact I discovered after delving into online research.

Although the route params were getting updated, the component's key remained stagnant.

The setup function within Index.vue (the task list)

 setup() {
        const router = useRouter()
        const route = useRoute()
        const { loadValue } = getValue()
        const category = ref()

        // Redirect back to lists when clicking on close icon.
        const redirectBack = () => {
            return router.push({name: 'Lists'})
        }
       
        // Fetching data of a specific category.
        const getCategory = () => {
            loadValue('categories', route.params.categoryId).then(data => {
                category.value = data
            })
        }

        watchEffect(() => {
            getCategory()
        })

        return {
            closeOutline,
            redirectBack,
            category,
        }

Issue with Vue 3 component not updating following vue-router invocation

Answer №1

Similar questions

Issue with redirecting to another link in Angular routing

Make sure that only one viewmodel property has insertMessages set to false in Knockout.js

What is the correct way to use "DELETE" and "BACKSPACE" in a condition statement?

Generate a Vue project using the vue-cli-service build command, but be sure to include the necessary period in

What is the most efficient way to transfer an item from one component to another in React

Tips on implementing VueStripe in a vue2 Project

Disable the default animation

Combining arrays in a nested array with the help of Javascript/Vue.Js

Executing the outer function from within the inner function of a different outer function

Is there a problem with the props being passed? Can someone verify this

An elusive static image file goes unseen within the realm of node.js/express

Node js overlooking non-packaged middleware

Leveraging retrieved API data to generate numerous components

When sending API data back to Vue from Express, the response is coming back as an empty

extracting a characteristic from one entity and transferring it to another entity

Troubleshooting: Mongoose Array Object Order Modification Issue

Preventing users from inputting the same number more than once

What is the reason javascript struggles to locate and replace strings with spaces in a URL?

submitting numerous forms using AJAX

Using Bootstrap Collapse with EJS Iteration