andesigne的checkout多选框

Question

使用andesign的checkout多选框，当我点击Apple的时候，如何在第一行数组Pear后面添加Apple

<template>
<div>{{value2}}</div>
  <br />
  <a-checkbox-group v-model:value="value2" :options="plainOptions" />
  <br />
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue';
const plainOptions = ['Apple', 'Pear', 'Orange'];


export default defineComponent({
  setup() {
    const state = reactive({
      value2: ['Apple'],
    });
    return {
      plainOptions,
      ...toRefs(state),
    };
  },

});
</script>

Answer 1

没必要控制顺序吧，a-checkbox-group应该是按照数据源先后来得到model的的值，要控制顺序可以用单个的checkbox添加onChange事件来控制value2的添加删除，示例如下

<template>
    <div>
        <div>{{value2}}</div>
        <a-checkbox v-for="value in plainOptions"
                    v-model:checked="ckstate[value]"
                    :key="value"
                    :value="value"
                    @change="checkChange">{{value}}</a-checkbox>
    </div>
</template>
<script>
    import { defineComponent, reactive, toRefs, ref } from 'vue';
    const plainOptions = ['Apple', 'Pear', 'Orange'];
    export default defineComponent({
        setup() {
            const state = reactive({
                ckstate: {},
                value2: []
            });

            const checkChange = (e) => {
                if (e.target.checked) state.value2.push(e.target.value);
                else {
                    let index = state.value2.findIndex(i => i == e.target.value);
                    state.value2.splice(index, 1);
                }

            };
            return {
                ...toRefs(state),
                plainOptions,
                checkChange
            };
        },

    });
</script>