| vue 怎么将Checkbox 多选框选中的值提交 | 您所在的位置：网站首页 › vue复选框取值 › vue 怎么将Checkbox 多选框选中的值提交 |
vue 怎么将Checkbox 多选框选中的值提交
|
说好的学习计划来了，用十天的时间，深入了解一下饿了么的组件，简单的记录一下，首先上文档： 资料相关星星指数：star:55k 中文文档：https://element.eleme.cn/#/zh-CN/component/checkbox Github 地址：https://github.com/PanJiaChen/vue-element-admin Demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard 首先根据文档上的示例，实现一个多选框功能，大概是这个样子的。 示例可自行查看：https://element.eleme.cn/#/zh-CN/component/checkbox 代码语言：javascript复制 {{city}} const cityOptions = ['上海', '北京', '广州', '深圳']; export default { data() { return { checkedCities: ['上海'], cities: cityOptions, }; }, methods: { handleCheckedCitiesChange(value) { let checkedCount = value.length; } } }; 实际应用，在实际的开发里面，我们还需要将选中的多选框的值传给后台，那么vue 怎么将Checkbox 多选框选中的值提交？比如说以字符串数组的形式提交给后端。 代码语言：javascript复制["上海","北京"]写了一个简单额示例： 代码语言：javascript复制 {{ city }} 确定 const cityOptions = ["上海", "北京", "广州", "深圳"]; export default { data() { return { checkedCities: ["上海", "北京"], cities: cityOptions, }; }, methods: { async createData() { const params = {}; params.city = this.checkedCities; alert(JSON.stringify(params)); }, handleCheckedCitiesChange(value) { // console.log(value) this.checkedValue = value; }, }, };
|
【本文地址】
公司简介
联系我们