Vuejs 2 Inhalt neu laden, indem man Slug ändert

Question

Ich habe den folgenden Code und es funktioniert, indem Sie die Seite aktualisieren funktioniert es gut, aber nicht, wenn Sie auf das Nav klicken.

Wie kann ich das erreichen, wenn ich auf Benutzer klicke, wird die Methode fetchData ausgeführt? So kann ich die console.log und die JSON-Daten sehen.

Navigation:

<div id="navbar" class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <router-link v-for="item in items" v-if="item.navitems && item.navitems.navitem" :to="item.navitems.navitem.url" tag="li" active-class="active" exact><a>{{item.navitems.navitem.name}}</a></router-link> 

Content.vue

<template> 
    <div> 
     <div class="container"> 
      <h1>{{ slug }}</h1> 
      <ul v-if="items && items.length"> 
       <li v-for="item of items"> 
        <p><strong>{{item.name}}</strong></p> 
        <p>{{item.email}}</p> 
       </li> 
      </ul> 
     </div> 
    </div> 
</template> 

<script> 
    export default{ 
     props: ['slug'], 
     data:() => ({ 
      items: [] 
     }), 
     created: function() { 
      this.fetchData(); 
     }, 
     methods: { 
      fetchData: function() { 
       var self = this; 
       console.log(this.slug); 
       $.get('http://jsonplaceholder.typicode.com/' + this.slug, function(data) { 
        self.items = data; 
        console.log(data); 
       }); 

      } 

     } 
    } 
</script> 

Answer 1

Changed in montiert und fügen Uhr erstellt.

watch: { 
     '$route.params.slug'(newSlug, oldSlug) { 
      this.fetchData(newId); 
     } 
    }