vue删除表格数据后无法刷新表格

[不能留白]

最近在学习vue，我在表格删除某条数据后无法重新刷新表格的数据，我的目的是要实现删除表格第三页的某条数据后，重新刷新表格跳转到删除数据的第三页，但是我发现数据可以删除，但是表格却无法刷新，这是怎么回事？？
页面代码如下：

<div id="td">
		<br><br>
		<table id="tb">
			<thead>
				<tr>
					<th>序号</th>
					<th>账号</th>
					<th>密码</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(person,index) in currentPageData">
					<td>{{(currentPage-1)*pageSize+index+1}}</td>
					<td>{{person.username}}</td>
					<td>{{person.password}}</td>
					<td><input value="删除" type="submit" @click="deleteUser(person.id)"></td>
				</tr>
			</tbody>
		</table>
		<br><br>
		<footer>
			<input value="首页" type="submit" @click="firstPage()">
			<input value="上一页" type="submit" @click="prevPage()">
			<span>{{currentPage}}/{{totalPage}}</span>
			<input value="下一页" type="submit" @click="nextPage()">
			<input value="尾页" type="submit" @click="endPage()">
			<input type="number" v-model="skipPage" id="skippage"> 
			<input value="跳转" type="submit" @click="btnPage()">
		</footer>
	</div>

js代码如下：

new Vue({
		el:"#td",
		data:{
			skipPage:"",//获取要跳转的页数
			totalSize:[],//保存所有数据的数组
			currentPage:1,//当前页
			totalPage:1,//总的页数
			pageSize:2,//每页显示的数据大小
			currentPageData:[]//当前页的数据(绑定表格的数组)
		},
		mounted:function(){
			this.btn();
		},
		methods:{
			btn(){
				axios.post("table").then(response=>{
					this.totalSize = response.data;
					 // 计算一共有几页
			        this.totalPage = Math.ceil(this.totalSize.length / this.pageSize);
			        // 计算得0时设置为1
			        this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
			        this.getCurrentPageData();
				}).catch(error=>{
					alert("获取失败");
					alert(error);
				})
			},
			getCurrentPageData() {
	            let begin = (this.currentPage - 1) * this.pageSize;
	            let end = this.currentPage * this.pageSize;
	            this.currentPageData = this.totalSize.slice(
	                begin,
	                end
	            );
	        },
            //删除
	        deleteUser(uid) {
	        	$.post("delete_user",{"id":uid},function(data){
	    			if(data=="success"){
	    				alert("删除成功！");
	    				var cPage=this.currentPage;//保存当前页
	    				this.btn();//重新获取数据的ajax
	    				this.currentPage=cPage;//把保存的当前页赋值给新的当前页
	    				this.getCurrentPageData();//把要展示的数据存进绑定dom的数组
	    			}
	    			else {
	    				alert("删除失败！");		
	    			}
	    		})
	        },
            }
	})

[不能留白]

我的删除思路是这样的： 点击删除按钮后，通过ajax进行删除数据，删除成功返回后，保存当前页，调用获取数据的方法，把数据重新保存到totalSize数组，然后把删除前的页数赋值到当前页，然后把当前页的数据给与表格绑定的currentPageData数组进行展示。 这是我的页面：

[scscms太阳光]

确实是初学者，整体结构非常不好。

＝＝＝＝＝＝＝＝＝＝以下this.currentPage值它就不可能会变
var cPage=this.currentPage;//保存当前页
this.btn();//重新获取数据的ajax
this.currentPage=cPage;//把保存的当前页赋值给新的当前页

＝＝＝＝＝＝＝＝＝＝＝＝这种赋值就会有问题，应该用$set或filter
this.currentPageData = ……

其实应该多用监听自动触发事件，比如监听页码变化自动去请求数据，而不是手动请求。

[不能留白]

引用 2 楼 scscms太阳光 的回复:

确实是初学者，整体结构非常不好。 ＝＝＝＝＝＝＝＝＝＝以下this.currentPage值它就不可能会变 var cPage=this.currentPage;//保存当前页 this.btn();//重新获取数据的ajax this.currentPage=cPage;//把保存的当前页赋值给新的当前页 ＝＝＝＝＝＝＝＝＝＝＝＝这种赋值就会有问题，应该用$set或filter this.currentPageData = …… 其实应该多用监听自动触发事件，比如监听页码变化自动去请求数据，而不是手动请求。

我测试了不赋值，删除成功直接调用获取数据的this.btn();方法，发现表格也是没有刷新的，赋值的目的是回到当前页，现在是表格连刷新都刷新不了，这该怎么解决？？

[不能留白]

引用 2 楼 scscms太阳光 的回复:

确实是初学者，整体结构非常不好。 ＝＝＝＝＝＝＝＝＝＝以下this.currentPage值它就不可能会变 var cPage=this.currentPage;//保存当前页 this.btn();//重新获取数据的ajax this.currentPage=cPage;//把保存的当前页赋值给新的当前页 ＝＝＝＝＝＝＝＝＝＝＝＝这种赋值就会有问题，应该用$set或filter this.currentPageData = …… 其实应该多用监听自动触发事件，比如监听页码变化自动去请求数据，而不是手动请求。

而且使用监听页码变化去请求数据，这个不是sql分页？？sql分页很繁琐，首先要获取总的页数，而且每一次跳转页数都要向后台请求数据，这样不是很频繁的操作？？

[jio可]

这样问题很大，记录页码然后赋值。如果当前第三页只有一条数据删除了这条数据，然后记录了页码3还回到3不就是没数据。 只需要监听页码变化重新拿数据，并且获取的数据是当前页的而不是一次获取所有数据在前端来分页。vue有很多表格ui都实现了这个功能，自己写一些各种bug的代码还不如去看看别人的实现源码

[不能留白]

引用 5 楼 三岁打酱油 的回复:

这样问题很大，记录页码然后赋值。如果当前第三页只有一条数据删除了这条数据，然后记录了页码3还回到3不就是没数据。 只需要监听页码变化重新拿数据，并且获取的数据是当前页的而不是一次获取所有数据在前端来分页。vue有很多表格ui都实现了这个功能，自己写一些各种bug的代码还不如去看看别人的实现源码

你监听页码的变化不还是要保存当前页才能返回当前页？？ 我现在的问题是不能刷新表格，不是这个页码的问题，你们怎么都是在纠结这个，你说的这个bug我早就知道了，没弄而已，给他加一个if判断是不是大于重新获取数据后的总页码就行了，如果超过了，我把当前页设置成最后一页不就得了，我现在主要是无法刷新表格，所以才没弄这个bug。 现在的问题是： 删除数据后无法刷新表格！！！ 删除数据后无法刷新表格！！！ 删除数据后无法刷新表格！！！

[scscms太阳光]

我的意思就算代码没毛病 this.currentPageData = this.totalSize.slice(
begin,
end
)它不刷新也是情理之中。应该使用
this.$set(this,'currentPageData ',this.totalSize.slice(begin,end)) 详细查阅vue $set

顺便说一句：学习vue应该把所有生命周期及属性都了解一下，每个属性方法都有相应的应用场景。不要学了MVVM模式仍使用jQuery思维去开发。

[scscms太阳光]

年青人脾气还挺大

[jio可]

删除成功执行getCurrentPageData,重新拿数据又执行一遍。代码问题很多。push、pop、shift、unshift等原生数组方法不会触发set.用一个新的数组引用地址赋值个currentPageData才能监听到变化

[不能留白]

引用 7 楼 scscms太阳光 的回复:

我的意思就算代码没毛病 this.currentPageData = this.totalSize.slice( begin, end )它不刷新也是情理之中。应该使用 this.$set(this,'currentPageData ',this.totalSize.slice(begin,end)) 详细查阅vue $set 顺便说一句：学习vue应该把所有生命周期及属性都了解一下，每个属性方法都有相应的应用场景。不要学了MVVM模式仍使用jQuery思维去开发。

没用，发现问题了，是无法调用重新获取数据的这个方法 this.btn();还不清楚是什么原因无法调用这个方法

[jio可]

如果数据量大到5，6位数获取数据就是一个问题前端分页一般都不会使用，通常的情况都是后端分页。自己玩玩的小项目几百数据不分页可以

[不能留白]

引用 9 楼 三岁打酱油 的回复:

删除成功执行getCurrentPageData,重新拿数据又执行一遍。代码问题很多。push、pop、shift、unshift等原生数组方法不会触发set.用一个新的数组引用地址赋值个currentPageData才能监听到变化

这个我发现了，所以注释后运行，发现问题出在无法调用重新获取数据的这个方法 this.btn();目前还不清楚为什么无法调用；

[scscms太阳光]

//删除
deleteUser(uid) {
var _this = this
$.post("delete_user",{"id":uid},function(data){
if(data=="success"){
alert("删除成功！");
var cPage=this.currentPage;//保存当前页
this.btn();//这个this已经不是vue对象，其它也是一样
_this .btn()
this.currentPage=cPage;//把保存的当前页赋值给新的当前页
this.getCurrentPageData();//把要展示的数据存进绑定dom的数组
}
else {
alert("删除失败！");
}
})
},

[jio可]

无法调用就是作用于问题function(data)改成(data) =>

[不能留白]

引用 13 楼 scscms太阳光 的回复:

//删除 deleteUser(uid) { var _this = this $.post("delete_user",{"id":uid},function(data){ if(data=="success"){ alert("删除成功！"); var cPage=this.currentPage;//保存当前页 this.btn();//这个this已经不是vue对象，其它也是一样 _this .btn() this.currentPage=cPage;//把保存的当前页赋值给新的当前页 this.getCurrentPageData();//把要展示的数据存进绑定dom的数组 } else { alert("删除失败！"); } }) },

ok，可以了，之前看how2j的ajax的时候注意到了，后来写btn()的时候发现不加也行，所以没意识到这问题