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

<template>
<div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</div>
</template>
<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data() {
      return {
        checkedCities: ['上海'],
        cities: cityOptions,
      };
    },
    methods: {
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
       
      }
    }
  };
</script>

实际应用，在实际的开发里面，我们还需要将选中的多选框的值传给后台，那么vue 怎么将Checkbox 多选框选中的值提交？比如说以字符串数组的形式提交给后端。

["上海","北京"]

写了一个简单额示例：

<template>
  <div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city"  :key="city"> {{ city }} </el-checkbox>
    </el-checkbox-group>
    <el-button type="primary" @click="createData()">确定</el-button>
  </div>
</template>
<script>
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;
    },
  },
};
</script>