Vue+jQuery 实现后台用户列表的加载,查询和修改

需求

页面加载时发AJAX请求, 加载到页面 (jQuery发请求, 用Vue渲染出页面)

点击用户信息后面的"查询" "编辑"按钮 可以查询详细信息和编辑 (GET和POST请求用jQuery做)

做的时候遇到的几个问题:

一,点击事件如何绑定?

直接在HTML里面写是不符合规范的.

这里就用到了.on方法的派生事件

公司规范是要求在按钮上面加class="yy_btn"

那么, 绑定事件就可以这样写

二,点击按钮后, 怎么才能知道这条数据在数据库里面对应哪一条呢 ?

解决方案:

在每次创建按钮的同时, 动态创建一个属性, 把这条数据对应的id存起来, 那么点击后, 只要拿到这个属性的值, 就可以知道这条数据在数据库里面对应的id了.

这里创建了一个person_id属性用来存数据库里对应的那个id.

HTML部分:

JS部分:

三, GET到数据后Vue如何展示?

首先先声明一个空数组, GET得到数据后, 用for循环将数据push到这个数组中, 构造出符合Vue语法的数组.

HTML部分:

JS部分:

完整代码是套在一个后台里面的, 太长, 就不贴出了.

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180407G177L600?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券