vue 通过switch开关修改数据并存入数据库

Events

事件名称说明回调参数
changeswitch 状态发生变化时的回调函数新状态的值

1.在el-switch中添加change事件

<el-switch v-model="slotProps.row.mg_state " @change="userStateChanged(slotProps.row)">
</el-switch>

2.编辑change事件调用的方法

// 监听switch 开关状态的改变。
async userStateChanged(uerInfo){
  const {data:res} = await this.$http.put(`users/${uerInfo.id}/state/${uerInfo.mg_state}`)
  if (res.meta.status !== 200){
    uerInfo.mg_state = !uerInfo.mg_state
    return this.$message.error("更新用户状态失败")
  }
  this.$message.success("更新用户状态成功!")
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue三级联动数据存入数据库的步骤如下: 1. 创建数据库表结构:首先,需要在数据库中创建适当的表结构,以存储三级联动数据。可以创建三个表,分别表示省、市、区级别的数据,每个表包含相应的字段。 2. 前端界面设计:在Vue的前端界面中,需要设计三级联动的选择框,并通过v-model绑定相应的数据。 3. 获取选择的数据:当用户在界面上选择了省、市、区的选项后,需要通过Vue的事件监听或者watch来获取相应的值。 4. 后端数据传输:将获取到的省、市、区数据传输到后端,可以通过axios或者其他请求库将数据以JSON格式发送给后端。 5. 后端数据处理:在后端接收到省、市、区数据后,可以对数据进行处理,包括数据校验、数据关联等。 6. 数据存入数据库:使用后端语言(例如PHP、Node.js等)操作数据库,将处理后的省、市、区数据存入相应的表中。 7. 数据操作返回:在数据存入数据库后,后端可以返回相应的状态码或者成功信息给前端。 8. 前端提示用户:前端可以根据后端返回的信息,提示用户数据存储成功或者出错的信息。 总结:将Vue三级联动数据存入数据库需要前后端协作,前端负责获取用户选择的数据并发送给后端,后端负责处理数据存入数据库。通过合理的设计和协作,可以实现三级联动数据的存储。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值