router-viewで遷移した後の動作と再読み込みした際の不具合の解消

前提・実現したいこと

vue.jsでrouter-viewを使用して以下コードで切り替えタブのような動作にさせようとしているのですが、「name: 'posts'」のルート「/home/posts」になった後、「/home/posts」内で別のタブをクリックしても反応はしません。

一度「/home」など別のルートへ移動し、別のタブをクリックしないといけないという状態です。

また、propsで値を渡しているため「/home/posts」ないで再読み込みを行うと正しく表示されなくなります。

この問題を解決するにはどのように変更したらよいでしょうか?

発生している問題・エラーメッセージ

「name: 'posts'」のルート「/home/posts」になった後、「/home/posts」内で別のタブをクリックしても反応はしません。

一度「/home」など別のルートへ移動し、別のタブをクリックしないといけないという状態です。

また、propsで値を渡しているため「/home/posts」ないで再読み込みを行うと正しく表示されなくなります。

該当のソースコード

vue
1<template>
2    <div>
3        <div class="overflow-auto">
4            <ul class="d-flex align-items-center">
5                <li
6                    v-for="tag in tags"
7                    :key="tag.id"
8                    class="px-3"
9                >
10                    <router-link
11                        v-bind:to="{
12                            name: 'posts',
13                            params: { post_tag: tag.name }
14                        }"
15                        class=""
16                    >
17                        {{ tag.name }}
18                    </router-link>
19                </li>
20            </ul>
21        </div>
22        <div class="contents">
23            <router-view :key="$route.fullPath" />
24        </div>
25    </div>
26</template>
27
28<script>
29export default {
30    name: "infos-component",
31    data: function() {
32        return {
33            tags: [],
34        };
35    },
36    methods: {
37        getTags() {
38            try {
39                const url = "/ajax/tag";
40                console.log("getTags");
41
42                axios.get(url).then(response => {
43                    this.tags = response.data;
44                });
45            } catch (error) {
46                console.log(error);
47            }
48        },
49        isset(data) {
50            return typeof data != "undefined";
51        },
52        empty(data) {
53            return data.length != 0;
54        }
55    },
56    mounted() {
57        this.getTags();
58    }
59};
60</script>
61

vue
1<!--posts-component-->
2<template>
3    <section class="all_posts">
4    <div class="container-fluid">
5        <div class="row">
6            <div class="col">
7                <ul class="p-0">
8                    <li v-for="post in posts">
9                    {{log(post.id)}}
10                        <post-component :postID ="post.id" :userID="post.user_id"></post-component>
11                    </li>
12                </ul>
13            </div>
14        </div>
15    </div>
16    </section>
17</template>
18
19<script>
20export default {
21    name: "posts-component",
22    props: {
23        post_tag: [String]
24    },
25    data: function() {
26        return {
27            posts: []
28        };
29    },
30    methods: {
31        async getPosts() {
32            try {
33                console.log('posts-component-getPosts');
34                
35                const url = "/ajax/post/all/";
36                await axios.get(url + this.post_tag).then(response => {
37                    this.posts = response.data;
38                });
39                console.log('this.post' + this.posts);
40                
41            } catch (error) {
42                console.log(error);
43            }
44        },
45        log(data) {
46            console.log("log = " + data);
47        },
48        isset(data) {
49            return typeof data != "undefined";
50        },
51        empty(data) {
52            return data.length != 0;
53        }
54    },
55    mounted() {
56        /*this.getProfile();*/
57        console.log(this.post_tag);
58        
59        this.getPosts();
60
61        Echo.channel("post").listen("PostCreated", e => {
62            console.log("PostCreated");
63            /*this.getProfile();*/
64            this.getPosts();
65        });
66
67        Echo.channel("post").listen("PostDeleted", e => {
68            console.log("Post");
69            /*this.getProfile();*/
70            this.getPosts();
71        });
72    }
73};
74</script>
75

補足情報（FW/ツールのバージョンなど）

「name:post」は「posts-component」が割り当てられており、「posts-component」に「tag.name」を渡してそのタグネームをもとにDBから取得するようにしています。

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

回答1件

自己解決

vue
1<template>
2    <div>
3        <div class="overflow-auto">
4            <ul class="d-flex align-items-center">
5                <li
6                    v-for="tag in tags"
7                    :key="tag.id"
8                    class="px-3"
9                    @click="currentTag = tag.name"
10                >
11                    {{ tag.name }}
12                </li>
13            </ul>
14        </div>
15        <div class="contents">
16            <posts-component  :key="currentTag" :post_tag="currentTag"/>
17        </div>
18    </div>
19</template>
20
21<script>
22export default {
23    name: "infos-component",
24    data: function() {
25        return {
26            tags: [],
27            currentTag: 'undefined',
28        };
29    },
30    methods: {
31        getTags() {
32            try {
33                const url = "/ajax/tag";
34                console.log("getTags");
35
36                axios.get(url).then(response => {
37                    this.tags = response.data;
38                });
39            } catch (error) {
40                console.log(error);
41            }
42        },
43        isset(data) {
44            return typeof data != "undefined";
45        },
46        empty(data) {
47            return data.length != 0;
48        }
49    },
50    mounted() {
51        this.getTags();
52    }
53};
54</script>
55