<template>
<div>
<ul>
<li v-for="(item,index) in pageLists"
@click="look(index)"
:class="{active: index == current && current !== ''}"
:key="index">
<span>{{item.title}}</span>
<p>{{item.content}}</p>
<small>{{dateTime}}</small>
<a v-show="index == current && current !== ''" @click="lookMore()">
<small>查看更多>></small>
</a>
</li>
</ul>
</div>
</template><script>
import store from '@/store'
export default {
name: "List",
store,
data () {
return {
current: '',
dateTime: new Date().toLocaleString()
}
},
computed: {
pageLists () {
return store.state.lists
}
},
methods:{
look (index) {
this.current = index
},
lookMore () {
this.$router.push('/info');
}
}
}
</script><template>
<div>
<div v-for="(item,index) in pageLists"
v-show="index == current"
:key="index">
<span>{{item.title}}</span>
<p>{{item.content}}</p>
</div>
<div class="returnList" @click="returnList()">返 回</div>
</div>
</template><script>
import store from '@/store'
export default {
store,
name: "Info",
data () {
return {
current: '',
}
},
computed: {
pageLists () {
return store.state.lists
}
},
methods:{
returnList () {
this.$router.push('/home/list')
}
}
}
</script>这里的道理很简单,因为你在Info页面没有告诉它要显示第几个啊。
你的LoadMore方法只是把路由跳转了,并没有传参数啊,小伙伴。
你要告诉Info页面,我现在点的第几个,你帮我展示一下下。
解决了吗。 我ifon组件显示的是全部额
谢谢老师,是这样?
lookMore () {
store.state.current = this.current
this.$router.push('/info');