Vue.js 实现单选/多选功能并发送请求

<template>
  <div>
    <div v-for='item in list' :key='item.id'>
      <input type='checkbox' v-model='checkedIds' :value='item.id' @change='handleChange' />
      {{ item.name }}
    </div>
    <button @click='handleSubmit'>提交</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' },
        { id: 4, name: '选项4' },
      ],
      checkedIds: [],
    };
  },
  methods: {
    handleChange() {
      // 判断单选或多选
      if (this.checkedIds.length === 1) {
        console.log('单选', this.checkedIds[0]);
        // 发送单选请求
      } else if (this.checkedIds.length > 1) {
        console.log('多选', this.checkedIds);
        // 发送多选请求
      }
    },
    handleSubmit() {
      // 发送请求
      this.checkedIds = [];
    },
  },
};
</script>