vue js component doesn't rerender on the same page

Question

I have a component

<template>somecode</template>
<script>
 export default {
        name: 'Card',
        created() {
                axios.get(apiObjUrl)
                      somecode
                })
     }
</script>

this my url: http://127.0.0.1:8080/#/card/12

But I have a problem:

when I use router-link like this:

<router-link to="/card/155"> card 155</router-link>

my url changes: http://127.0.0.1:8080/#/card/155

but the created() method doesn't get fired. so I don't make new xhr request to api and data not changes what do I do?

@VamsiKrishna jsfiddle.net/rowrt1x1

user2950593
– user2950593

2017-07-28 11:47:38 +00:00
Commented Jul 28, 2017 at 11:47 — user2950593
– user2950593, Commented Jul 28, 2017 at 11:47

tony19 · Accepted Answer · 2022-07-15 20:35:59Z

6

As an alternative you can setup a key attribute on your <router-view> like this:

    <router-view :key="$route.fullPath"></router-view>

As <router-view> is a component itself and unique keys force replacement of component instead of reusing it. So you can make use of life cycle hooks.

See the fiddle

edited Jul 15, 2022 at 20:35

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jul 28, 2017 at 12:19

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2950593 Over a year ago

whta exactly :key attr does here?

Vamsi Krishna Over a year ago

@user2950593key tells Vue’s virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list. In simple words it tells vue that the node should be replaced (rerendered) with a new one as new key is passed with a new route path on every route change.

Aer0 · Accepted Answer · 2017-07-28 11:50:07Z

4

That's just because your component is already created. You may try using the lifecycle hook updated() instead of created().

 export default {
   name: 'Card',
   updated() {
     axios.get(apiObjUrl)
     somecode
   })
 }

Note: This will only work if your DOM changes. If you just want to listen on url changes and update accordingly you better $watch your route like this.

export default {
  name: 'Card',
  created() {
    axios.get(apiObjUrl)
    somecode
  }),
    watch: {
    '$route': function() {
        // do your stuff here
    }
    }
}

edited Jul 28, 2017 at 11:50

answered Jul 28, 2017 at 11:41

Aer0

3,91720 silver badges35 bronze badges

4 Comments

user2950593 Over a year ago

when I change created method to updated updated method doesn't get fired the first time I load the page(I don't know why) nothing in console

user2950593 Over a year ago

I don't really got it

user2950593 Over a year ago

I need to call the same code axios.get(apiObjUrl) on page created when I refresh the page, and on url change with router-link, so how do I exactly do it?

Aer0 Over a year ago

I've edited my code, there was a little mistake. Leave your current code as it is and add the watch property to it. This can take in any property you want and listen on changes. Whenever a change happens (in this case whenever your url changes) it'll just fire up any expressions within its execution block. More here: vuejs.org/v2/api/#vm-watch

Collectives™ on Stack Overflow

vue js component doesn't rerender on the same page

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related