vue
<template>
  <div class="s-checkbox" style="width: 100%; gap: 10px">
    <template v-for="item in data" :key="item">
      <el-button
        disabled
        v-if="data2.includes(item)"
        type="primary"
        style="min-width: 30px"
        @click="toggleItem(item)"
      >
        {{ item }}
      </el-button>
      <el-button
        disabled
        v-else
        style="min-width: 30px"
        @click="toggleItem(item)"
      >
        {{ item }}
      </el-button>
    </template>
  </div>
</template>

<script setup lang="ts">
import {ref, defineProps, defineEmits, watch} from "vue";

// Define props with default values
const props = defineProps<{
  data?: number[];
  data2?: number[];
}>();

// Use default values if props are not provided
const data = ref(props.data || []);
const data2 = ref(props.data2 || []);

watch(() => props.data2, (newVal) => {
  data2.value =  props.data2
});

// Define emits to send data back to the parent
const emit = defineEmits<{
  (e: 'update:data2', value: number[]): void;
}>();

function toggleItem(item: number) {
  if (data2.value.includes(item)) {
    data2.value = data2.value.filter((i) => i !== item);
  } else {
    data2.value.push(item);
  }
  // Emit the updated data2 back to the parent
  emit('update:data2', data2.value);
}
</script>

<style scoped>
.s-checkbox {
  width: 100%;
  display: flex;
  align-items: center;
}
</style>
