问题背景
出现此类bug,大多数情况下是因为在点击知识库其他内容时,没有重新调接口。
<template>
<div>
<div :class="{'expand': expand}">
<div class="cata-item flex" :class="{'active': item.baseId === $route.params.id}">
<i class="nb-pull-down" :class="{'expand': expand}"
v-if="item.childrenList.length > 0"
@click="expand = !expand"></i>
<div v-else class="cata_i_holder"></div>
<div class="title nowrap" @click="jump(item)">{{item.title}}</div>
</div>
</div>
<div class="ml23" v-for="cata in item.childrenList" :key="cata.id">
<CataShowTree :item="cata"></CataShowTree>
</div>
</div>
</template>
<script>
export default {
name: 'CataShowTree',
props: ['item'],
data () {
return {
expand: false
}
},
methods: {
jump (item) {
if (item.link) {
window.open(item.link, '_blank')
} else if (item.baseId) {
this.$router.push(`/base/${item.baseId}`)
}
}
}
}
</script>
从代码中,我们可以看到,当点击目录的标题时,会在原窗口中打开新的内容,而我们的评论组件是在首次打开窗口时调用接口。
也就是说,当打开第一条内容时,我们调用了评论的相关接口,再在原窗口中打开其他内容时,评论的接口并没有随着内容的切换,而再次调用接口,所以显示的永远是第一条内容所属的评论。
解决方法
当切换内容时,虽然没有重新打开页面,但是他的路由是发生变化的。
所以,我们可以监听路由的变化,一旦路由变了,我们就重新调用接口。
当我们把ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法。
watch: {
'$route.params.id' () {
let _refs = this.$refs
_refs.Comment.fetchData()
}
},
这段代码的意思就是,当路由id发生变化时,重新调用子组件Comment里面的fetchData方法。
async fetchData () {
let _params = {
rid: this.$route.params.id,
type: 'base'
}
let { data } = await getCommentListApi(_params)
this.replys = data.list || []
}