In actual application, in the actual development, we also need to pass the value of the selected checkbox to the background, then how does vue submit the value of the Checkbox checkbox? For example, submit it to the backend in the form of a string array.
<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>