Below I will share with you an example of Vue.js Layer table data binding and update. It has a good reference value and I hope it will be helpful to everyone.
1: First use Vue.js to bind the data and update events
Use v-on to bind the event, inside the event Directly pass the row of data in, and you can directly retrieve the data that needs to be updated in the update method
<p id="content">
<table class="mytable">
<tr class="header">
<td>选择</td>
<td>用户名</td>
<td>学号</td>
<td>班级</td>
<td>操作</td>
</tr>
<tr v-for="item in mydata">
<td><input type="checkbox" :value="item.Id" /></td>
<td>{{item.UserName}}</td>
<td>{{item.Number}}</td>
<td>{{item.Class}}</td>
<td>
<a href="#" rel="external nofollow" rel="external nofollow" v-on:click="udelete(item.Id)">删除</a>
<a href="#" rel="external nofollow" rel="external nofollow" v-on:click="updateu(item)">更新</a>
</td>
</tr>
</table>
</p>Copy after login
//实例化vue.js(用来给表格提供数据的)
var vm = new Vue({
el: '#content',
data: {
mydata: data
},
methods: {
udelete: function (_id) //删除
{
},
updateu: function (item) //更新
{
}
}
});Copy after login
The effect is as follows:
2: Click the update event to pop up the layer update box
Write it first html
@* 给layer弹出层提供数据 *@
<p id="updatecontent" style="display:none">
<table style="margin-top:20px;margin-left:23px;">
<tr>
<td>
用户名:
</td>
<td>
<input type="text" v-model="userinfo.UserName" />
</td>
</tr>
<tr>
<td>
学号:
</td>
<td>
<input type="text" v-model="userinfo.Number" />
</td>
</tr>
<tr>
<td>
班级:
</td>
<td>
<input type="text" v-model="userinfo.Class" />
</td>
</tr>
</table>
</p>Copy after login
Pop up layer
updateu: function (item) //更新
{
layer.open({
type: 1,
title: "更新",
area: ["300px", "230px"],
content: $("#updatecontent"),
btn: ["保存"],
yes: function (index) {
alert("点击保存");
},
cancel: function () { //点击关闭按钮
}
});
}Copy after login
The effect is as follows:
Three: Provide good data for the layer pop-up box
The traditional approach is to take out the values one by one, and then Assign a value to the text box, and now you can use vue.js to bind it all at once
Instantiate a vue specifically to provide data for the text box in the pop-up box
//给更新p添加数据
var update_vm = new Vue({
el: "#updatecontent",
data: {
userinfo: {}
}
});Copy after login
When we click the update button, we have passed the value of the row through an object,
Bind directly to vue.js
updateu: function (item) //更新
{
update_vm.$data.userinfo = item;
}Copy after login
In this way, you can get the data that needs to be updated when you click
And due to two-way binding, when the text box sends changes, The content of the table will also change automatically
Four: Click Save to update
The traditional method is to take Get the updated value, that is, get the value of the text box based on the id, and then assemble it into a json object and pass it to the background to implement the update.
Using vue.js can avoid
Assembling objects by yourself, because it is two-way binding, the value of the text box changes automatically when the model value changes
We directly put the Model Just transfer the value back to the background to update it
layer.open({
type: 1,
title: "更新",
area: ["300px", "230px"],
content: $("#updatecontent"),
btn: ["保存"],
yes: function (index) {
//调用后台实现更新
$.post('/home/UpdateU', update_vm.$data.userinfo, function (result) {
});
},
cancel: function () { //点击关闭按钮
}
});Copy after login
Just use ef to update it directly in the background
//更新
public JsonResult UpdateU(Users uinfo)
{
testEntities en = new testEntities();
en.Entry<Users>(uinfo).State = System.Data.EntityState.Modified;
int count = en.SaveChanges();
return Json(count);
}Copy after login
The above uses vue layer to implement updates. There is no place to organize the data. We only need to focus on the data itself.
If you don’t want the table to automatically change when changing the text box value, you can clone an object in Binding
Because if the user clicks Close, it needs to be restored to the data that has not been updated
Use jquery to clone an object and bind it
updateu: function (item) //更新
{
//克隆一个对象
var databack = $.extend({}, item);
update_vm.$data.userinfo = databack;
}Copy after login
In this case, the database has been updated and the page has not been updated. You can directly refresh the webpage
Of course, you can also use the update Model to update the page and directly replace the vue.js data. Updated to the page
$.post('/home/UpdateU', update_vm.$data.userinfo, function (result) {
//可以把vue.js数据替换从而更新更新到页面
vm.$data.mydata.splice(index, index, update_vm.$data.userinfo);
});Copy after login
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
An angular method-level cache annotation (decorator)
vue multiple entry files Examples of building vue multi-page construction
Solving the problem of multiple vue routes sharing one page
The above is the detailed content of Examples of Vue.js+Layer table data binding and update. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
