实际应用,在实际的开发里面,我们还需要将选中的多选框的值传给后台,那么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>

在这里插入图片描述
新创建一个公众号 Rockey小何同学 想相互交流的同学可以关注一下哈! 感谢支持!

Logo

前往低代码交流专区

更多推荐