Vuetifyでページ（現在のパス？）によってボタンを消したい

前提・実現したいこと

ユーザ情報の登録、ログイン、編集のフォームをコンポーネントにしようとしています。
表示しているページによって、関係ないボタンを消そうとしています。v-ifで書きたいと思ったのですが、条件式に何を書けばいいのかわかりません。

v-if=($route.path=='/index')で正しいでしょうか？

該当のソースコード

vue
1<v-btn (this.$route.path=='/register') color="primary" text @click="submit">会員登録</v-btn>
2<v-btn (this.$route.path=='/login') color="primary" text @click="submit">ログイン</v-btn>
3<v-btn (this.$route.path=='/edit') color="primary" text @click="submit">更新</v-btn>

行動規範の内容に同意します

回答2件

※ちゃんと書き忘れたのですが、私が書いたのはボタンを消す方法ではなく、押せなくする方法です。ボタン自体は表示されたままです。また、今表示中の画面とは別の条件で押せなくする方法です。v-ifで消す方法自体は他の方の回答の通りでいいと思います。ボタンだけ消えればいいかというとそうじゃないかもしれませんが。

disabledプロパティを使えば出来ると思います。
https://vuetifyjs.com/ja/components/buttons/#api

サンプルコードを載せておきます。コメントにあるガード条件設定でも似たようなことが可能です。
条件は、ログイン状態のときだけログイン以外の画面に遷移可能という要件で設定しています。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
7    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
8    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
9    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
10    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
11    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
12    <script src="https://unpkg.com/vue-router@3.4.3/dist/vue-router.js"></script>
13    <script src="https://unpkg.com/vuex"></script>
14    <script>
15        Vue.use(Vuetify);
16        Vue.use(VueRouter);
17        Vue.use(Vuex);
18        window.addEventListener('DOMContentLoaded', () => {
19            // Vuex設定(ログイン状態管理)
20            const store = new Vuex.Store({
21                state: {
22                    logined: false
23                },
24                mutations: {
25                    toggleLogined(state) {
26                        state.logined = !state.logined;
27                    },
28                }
29            });
30
31            // 登録コンポーネント
32            const register = {
33                template: `
34                    <v-card>登録です</v-card>
35                `,
36            };
37            // ログインコンポーネント
38            const login = {
39                template: `
40                    <v-card>ログインです<v-checkbox label="ログイン中" v-model="logined" @click="clicked"/></v-card>
41                `,
42                computed: {
43                    logined: function () {
44                        return this.$store.state.logined;
45                    }
46                },
47                methods: {
48                    clicked: function () {
49                        this.$store.commit('toggleLogined');
50                    }
51                },
52            };
53            // 更新コンポーネント
54            const edit = {
55                template: `
56                    <v-card>更新です</v-card>
57                `,
58            };
59            // ルーティング設定
60            const router = new VueRouter({
61                routes: [
62                    { path: '/register', name: "register", component: register },
63                    { path: '/login', name: "login", component: login },
64                    { path: '/edit', name: "edit", component: edit },
65                ]
66            });
67            // 一応ガード設定も書いとく
68            // router.beforeEach((to, from, next) => {
69            //     if ((!store.state.logined) && (to.name != 'login')) {
70            //         next(false);
71            //     } else {
72            //         next();
73            //     }
74            // });
75            // vue初期化
76            new Vue({
77                el: '#app',
78                store,
79                data: () => ({
80                    drawer: null,
81                }),
82                computed: {
83                    logined: function () {
84                        return this.$store.state.logined;
85                    },
86                },
87                vuetify: new Vuetify(),
88                router,
89            });
90        });
91    </script>
92</head>
93
94<body>
95    <div id="app">
96        <v-app>
97            <v-navigation-drawer app v-model="drawer">
98                <v-list-item>
99                    <v-btn to="/register" :disabled="! logined">会員登録</v-btn>
100                </v-list-item>
101                <v-list-item>
102                    <v-btn to="/login">ログイン</v-btn>
103                </v-list-item>
104                <v-list-item>
105                    <v-btn to="/edit" :disabled="! logined">更新</v-btn>
106                </v-list-item>
107            </v-navigation-drawer>
108
109            <v-app-bar app>
110                <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
111                〇〇アプリ
112            </v-app-bar>
113
114            <v-main>
115                <router-view />
116            </v-main>
117        </v-app>
118    </div>
119</body>
120
121</html>