Vueはチェックボックスチェックボックスで選択された値をバックグラウンドに送信します

実際のアプリケーションでは、実際の開発では、選択したチェックボックスの値をバックグラウンドに渡す必要があります。次に、vueはチェックボックスのチェックボックスで選択した値をどのように送信しますか?たとえば、文字列配列の形式でバックエンドに送信します。

<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>

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/he1234555/article/details/115262308