Vue.js + Laravel8でv-ifが上手く動作しない
【開発環境】
Windows 10 HOME
PHP 7.4.7
laravel/framework: ^8.2,
vue": "^2.5.17",
解決したいこと
Vue.js + Laravelの勉強で
ローカルで開発しています。
ログイン機能をつけているのですが、
ログイン後のタスク一覧のヘッダー部分の
v-if が上手く動作しないようです。
ログイン後にもう一度
画面を更新するとログイン後に表示したいボタンの
一覧が表示されます。
【ログイン前】
・ログインボタン
【ログイン後】
・一覧ページボタン
・新規登録ページボタン
・ログアウトボタン
ヘッダー部分
resources\js\components\HeaderComponent.vue
<template>
<div class="container-fluid bg-dark mb-3">
<div class="container">
<nav class="navbar navbar-dark">
<span class="navbar-brand mb-0 h1">Vue Laravel SPA</span>
<!-- Authenticated -->
<div v-if="user">
<router-link v-bind:to="{name:'task.list'}">
<button class="btn btn-success">List</button>
</router-link>
<router-link v-bind:to="{name:'task.create'}">
<button class="btn btn-success">ADD</button>
</router-link>
<button type="button" class="btn btn-danger" @click="logout">Logout</button>
</div>
<!-- Gusst -->
<div v-else>
<router-link v-bind:to="{name:'login'}">
<button class="btn btn-success">login</button>
</router-link>
</div>
</nav>
</div>
</div>
</template>
<script>
export default {
data() {
return {
user: ""
};
},
mounted() {
axios.get("/api/user").then(response => {
this.user = response.data;
});
},
methods: {
logout() {
axios
.post("api/logout")
.then(response => {
console.log(response);
localStorage.removeItem("auth");
this.$router.push("/login");
})
.catch(error => {
console.log(error);
});
}
},
};
</script>
何か心当たりがある方、
解決方法を教えて下さい。
2021年6月26日(土) 14:00 追記
ルートファイルでHeaderComponentを
読み込むのを止めて
resources\views\index.blade.php
<div id="app">
<HeaderComponent></HeaderComponent>
<router-view />
</div>
↓
resources\views\index.blade.php
<div id="app">
<router-view />
</div>
TaskListComponent画面でHeaderComponent部分を
下記のように読み込むことで想定通りの動作が確認出来ました。
resources\js\components\TaskListComponent.vue
<template>
<div>
<HeaderComponent></HeaderComponent> // 追記
<div class="container">
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">Title</th>
<th scope="col">Content</th>
<th scope="col">Person In Charge</th>
<th scope="col">Show</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr v-for="(task, index) in tasks" :key="index">
<th scope="row">{{ task.id }}</th>
<td>{{ task.title }}</td>
<td>{{ task.content }}</td>
<td>{{ task.person_in_charge }}</td>
<td>
<router-link v-bind:to="{name: 'task.show', params: {taskId: task.id }}">
<button class="btn btn-primary">Show</button>
</router-link>
</td>
<td>
<router-link v-bind:to="{name: 'task.edit', params: {taskId: task.id }}">
<button class="btn btn-success">Edit</button>
</router-link>
</td>
<td>
<button class="btn btn-danger" v-on:click="deleteTask(task.id)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import HeaderComponent from "./HeaderComponent.vue" // 追記
export default {
components: {
HeaderComponent // 追記
},
data() {
return {
tasks: []
};
},
methods: {
getTasks() {
axios.get('/api/tasks')
.then((res) => {
this.tasks = res.data;
});
},
deleteTask(id) {
axios.delete('/api/tasks/' + id)
.then((res) => {
this.getTasks();
});
}
},
mounted() {
this.getTasks();
}
}
</script>
0
