上个小节我们定义了后端的Web方法，经过Swagger测试之后，修改罚款类型信息是没问题的，那么本小节咱们去实现修改罚款类型信息的前端JS代码。

因为新增和修改都共用amect_type-add-or-update.vue弹窗页面，所以我们要修改记录的时候，必须向弹窗页面传入要修改记录的ID，然后让弹窗页面的init()函数去查询数据。我们来看看这个init()函数究竟是怎么定义的。

init: function(id) {
    let that = this;
    that.dataForm.id = id || 0;
    that.visible = true;
    that.$nextTick(() => {
        that.$refs['dataForm'].resetFields();
        if (id) {
            that.$http('amect_type/searchById', 'POST', { id: id }, true, function(resp) {
                that.dataForm.type = resp.type;
                that.dataForm.money = resp.money + '';
            });
        }
    });
},

在amect_type.vue页面上，我们点击修改按钮会显示弹窗页面。

<el-button type="text" size="medium" @click="updateHandle(scope.row.id)">修改</el-button>

按钮点击事件回调函数updateHandle()我们要实现一下，然后可以在浏览器上面测试了。

updateHandle: function(id) {
    this.addOrUpdateVisible = true;
    this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
    });
}