Vuejs 2通過更改slu re重新加載內容

Question

我有以下代碼，它通過刷新工作正常的頁面工作，但沒有單擊導航時。

我怎麼能實現，當我點擊用戶，方法fetchData將被執行？所以我可以看到console.log和json數據。

導航：

<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

改變創建成安裝並添加手錶。

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