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); 
     } 
    }