Vuejs2 Vuejs 2通过更改slug重新加载内容
我有下面的代码,它的工作原理是刷新页面。它工作正常,但不是在点击导航时 当我单击用户时,如何实现该目标,将执行fetchData方法?所以我可以看到console.log和json数据 导航:Vuejs2 Vuejs 2通过更改slug重新加载内容,vuejs2,vuex,Vuejs2,Vuex,我有下面的代码,它的工作原理是刷新页面。它工作正常,但不是在点击导航时 当我单击用户时,如何实现该目标,将执行fetchData方法?所以我可以看到console.log和json数据 导航: <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <router-link v
<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>
{{item.navitems.navitem.name}
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>
{{slug}}
-
{{item.name}}
{{item.email}
导出默认值{
道具:['slug'],
数据:()=>({
项目:[]
}),
已创建:函数(){
这是fetchData();
},
方法:{
fetchData:函数(){
var self=这个;
console.log(this.slug);
$.get('http://jsonplaceholder.typicode.com/'+this.slug,函数(数据){
self.items=数据;
控制台日志(数据);
});
}
}
}
将创建的手表更改为挂载并添加手表
watch: {
'$route.params.slug'(newSlug, oldSlug) {
this.fetchData(newId);
}
}