如何解决如何在路由更改时显示来自db的数据?
我正在vue.js + firebase中开发类似Messenger的应用程序。我要做的是-在每次更改路由时,从db中获取一些与ID(存储在route中)相对应的数据核心,然后将其显示在屏幕上。这些数据使我有些奇怪的行为,而且按预期的方式行不通。
代码:
methods: {
getRoomName() {
db.collection("rooms")
.doc(this.params)
.onSnapshot((snapshot) => (this.roomName = snapshot.data().name));
},},watch: {
$route(to,from) {
this.getRoomName();
},
其中的数据:
data() {
return {
input: "",roomName: "",params: this.$route.params.id,message: "",roomNameTest: "",};
},
模板:<span class="roomName">{{roomName}}</span>
解决方法
我注意到的第一件事是您在data()处调用this。$ route,它将无法工作。如果您需要填充某些东西,请尝试使用Vue Lifecycle Hooks。
,生命周期挂钩(已挂载/创建用于此类操作。分别在创建和挂载vue实例时调用它们。
mounted() // it can also work for the created hook {
this.getRoomName();
},
该监视程序监视路线更改,但实际上并不适合这种情况,因为在更改路线时,尚未实例化正在监视的组件。当您正在观看的特定Vue实例分别实例化/安装时,将触发安装/创建的挂钩。
使用观察者进行路由更改的适当时间是,如果URL上的参数发生更改,则您需要执行某些操作。一个示例是更改/users/1 to
/ users / 2`。这将起作用,因为使用了相同的组件,并且观察者将检测到更改。
我正在使用$route.path
来监视更改以获取新的ID。
组件
computed: {
...mapState('products',['products']),},watch: {
'$route.path'() {
this.bindProducts(this.IdFromUrl)
},mounted() {
this.bindProducts(this.IdFromUrl)
},methods: {
...mapActions('products',['bindProducts']),}
在我的商店中,正在运行vuexfire。 或者,您可以绑定自己的数据。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。