laravel - 保存后如何在laravel vue中重新加载页面?
问题描述
我试图在 laravel 和 vue.js 中保存后重新加载页面,我在“fetchGoals”中执行此操作。这是我尝试过的方法,它第一次起作用,它保存了目标并刷新了页面。当我尝试添加另一个目标时,保存按钮不再起作用,页面也不会刷新。编辑按钮也是如此,第一次会起作用,第二次不会。无论是保存还是编辑,都存在同样的问题,我只能执行一个页面刷新的功能。任何想法我做错了什么?
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<form @submit.prevent="addGoal" class="mb-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="Goal" v-model="goal.title">
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Description" v-model="goal.description">
</textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Add New Goal</button>
</form>
<button @click="clearForm()" class="btn btn-danger btn-block">Cancel</button>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">Title</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr v-for="goal in goals" v-bind:key="goal.id">
<td>{{goal.id}}</td>
<td>{{goal.title}}</td>
<td>{{goal.description}}</td>
<td>
<button @click="editGoal(goal)" class="btn btn-warning btn-xs">Edit</button>
</td>
<td>
<button @click="deleteGoal(goal.id)" class="btn btn-danger btn-xs">Delete
</button>
</td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li v-bind:class="[{disabled: !pagination.prev_page_url}]" class="page-item">
<a class="page-link" href="#" @click="fetchGoals(pagination.prev_page_url)">Previous</a>
</li>
<li class="page-item disabled">
<a class="page-link text-dark" href="#">Page {{ pagination.current_page }} of {{
pagination.last_page }}</a>
</li>
<li v-bind:class="[{disabled: !pagination.next_page_url}]" class="page-item">
<a class="page-link" href="#"
@click="fetchGoals(pagination.next_page_url)">Next</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
goals: [],
goal: {
id: '',
title: '',
description: '',
user_id: 1,
},
goal_id: '',
pagination: {},
edit: false
};
},
created() {
this.fetchGoals();
},
methods: {
//gets the data and the pagination
fetchGoals(page_url) {
let vm = this;
page_url = page_url || '/api/goals';
fetch(page_url)
.then(res => res.json())
.then(res => {
this.goals = res.data;
//this comes from res and res is the data from the Jason
vm.makePagination(res.meta, res.links);
})
.catch(err => console.log(err));
},
addGoal() {
if (this.edit === false) {
// Add
fetch(`/api/goal`, {
method: 'post',
body: JSON.stringify(this.goal),
headers: {
'content-type': 'application/json',
}
})
.then(res => res.json())
.then(data => {
this.clearForm();
alert('Article Added');
this.fetchGoals();
})
.catch(err => console.log(err));
} else {
//Edit save
fetch(`/api/goal`, {
method: 'put',
body: JSON.stringify(this.goal),
headers: {
'content-type': 'application/json',
}
})
.then(res => res.json())
.then(data => {
this.clearForm();
alert('Article Added');
this.fetchGoals();
})
.catch(err => console.log(err));
}
},
editGoal(goal) {
this.edit = true;
this.goal.id = goal.id;
this.goal.goal_id = goal.id;
this.goal.title = goal.title;
this.goal.description = goal.description;
},
clearForm() {
this.edit = false;
this.goal.id = null;
this.goal.goal_id = null;
this.goal.title = '';
this.goal.description = '';
this.goal.user_id = null;
}
}
};
</script>
解决方案
您可以使用传统的 JavaScript 来解决您的问题
// Reload the current page
window.location.reload();
用于window.location.reload(true);
强制重新加载(忽略浏览器缓存)
推荐阅读
- python - 如何访问 for 循环中的元素?
- objective-c - 计算协调火星时间
- c++ - Xcode Test Navigator 如何在纯 C++ 项目中显示 Google 测试
- python - 刮 NSE 页面的技巧是什么?
- java - Android(Java)在json中搜索字符串
- node.js - Kubernetes HPA 部署找不到目标资源
- python - 无法导入解析 tfrecords 序列化示例
- javascript - 将 MSAL.js 用于 NodeJ
- python - 在 sci-kit 中保存和加载模型优化
- angular - Angular 7 innerHTML using a material design button