Table data binding and update of vue.js+layer

This time I will bring you the vue.js+layer tableData bindingand update, vue.js+layer table data binding and updateWhat are the precautions , the following is a practical case, let’s take a look.

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 take out 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>

 //实例化vue.js(用来给表格提供数据的)
        var vm = new Vue({
          el: '#content',
          data: {
            mydata: data
          },
          methods: {
            udelete: function (_id) //删除
            {
            },
            updateu: function (item) //更新
            {
            }
          }
        });

The effect is as follows:

2: Click the update event to pop up the layer update box

Write the html first

@* 给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>

Pop up the layer

  updateu: function (item) //更新
            {          
              layer.open({
                type: 1,
                title: "更新",
                area: ["300px", "230px"],
                content: $("#updatecontent"),
                btn: ["保存"],
                yes: function (index) {
                  alert("点击保存");
                },
                cancel: function () { //点击关闭按钮
                }
              });
            }

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 After assigning value to the text box, you can now use vue.js to bind it 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: {} 
     } 
   });

When we click the update button The value of the row has been passed through a object ,

is directly bound to vue.js

updateu: function (item) //更新 
            { 
 
              update_vm.$data.userinfo = item; 
                 
            }

so that you can get what you need when clicking The updated data

#And due to two-way binding, when the text box sends changes, the table content will automatically change

Four: Click Save to update

The traditional approach is to get the updated value, that is, to get the value of the text box with the id. Then assemble it into a json object and pass it to the background to 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 implement the update.

 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 () { //点击关闭按钮
                }
              });

Just use ef to update 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); 
  }

The above uses vue+layer to implement the update. There is no place to organize the data. We need to pay attention to the data itself. That's it

If you don't want the table to change automatically when changing the text box value, you can clone an object and bind it

Because if the user clicks Close, it will revert to no update. Data

Use jquery to clone an object and just bind it

updateu: function (item) //更新 
{ 
  //克隆一个对象 
  var databack = $.extend({}, item); 
  update_vm.$data.userinfo = databack; 
               
}

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 Use the update Model to update the page, directly replace the vue.js data to update the page

$.post('/home/UpdateU', update_vm.$data.userinfo, function (result) { 
              
  //可以把vue.js数据替换从而更新更新到页面 
  vm.$data.mydata.splice(index, index, update_vm.$data.userinfo); 
});

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed tutorial on pm2 deploying node.js project

layui select how to dynamically add option

The above is the detailed content of Table data binding and update of vue.js+layer. For more information, please follow other related articles on the PHP Chinese website!