Question

基本上，我有一个用户列表页面，其中包含许多其他个人资料，包括您自己的个人资料。仅当您使用自己的个人资料时，才会显示一个按钮。

问题是当我从其他配置文件切换到自己的配置文件时（因此，路由器的参数正在更改），该按钮应该出现。反之亦然（我的个人资料->按钮消失的其他个人资料）。

现在，仅当我从其他路由器（而不是从其他配置文件，而是从主页切换到我自己的配置文件）切换时，按钮才会显示。

在我的Profile.vue上

                        <v-btn
                            v-if= "isUserProfile()"
                            outline
                            large
                            fab
                            v-on="on"
                            color="indigo">
                        <v-icon>edit</v-icon>
                        </v-btn>

在Profile.vue中使用监视程序，只要URL /路由器参数发生更改，便可以查找

  watch: {
        '$route.params.username': {
            immediate: true,
            handler (value) {
                this.username = value
                this.getId()
                this.isUserProfile()
            }
        }
    },

使用方法

isUserProfile () {
            return (this.$store.state.route.params.username === this.$store.state.user.username)
        },

因此，每次我从另一个配置文件切换到自己的配置文件时，该按钮都应该出现，因为当我从我的配置文件切换到另一个配置文件时，该按钮将起作用。对于我的个人资料为“ 123123”的gif示例：

https://gyazo.com/cf47036bfb60cc6490c538e50a32db81

我在这里所做的是手动将url上的参数从转到我的帐户，切换到另一个帐户，再回到我的帐户。（按钮在那里；好|不在那里；好|按钮仍然不在那里，应该在那里；不好。）

Answer 1

好的，答案是简单，而正如我刚刚检查的那样，不需要修改使其成为计算值（我认为这样做是一种更好的做法计算值）。

答案：代替 v-if：isUserProfile ，使其成为 v-show：isUserProfile ；现在，该按钮将更改为完成方式。

我现在将在阅读https://vuejs.org/v2/guide/conditional.html以获得更多知识。

Vue.js：是否可以通过观察程序使按钮“ v-if”反应？

在我的Profile.vue上

1 个答案: