Using multiple vue 3-multiselect-checkboxes causes strange.

[ofulusan]

If you use multiple components in one vue, when you click Select All, one of the multiselect-checkboxed will work. For example, if you click Select All of multiselect-checkboxed in A in a modal that contains two multiselect-checkboxed, all multiselect-checkboxed in B will also be selected. The code is like the image.

[ofulusan]

I think it's because they have the same ID, but what do you think? Please let me know if there is any way I can improve it.

[vldmitrofanov]

I think it's because they have the same ID, but what do you think? Please let me know if there is any way I can improve it.

Thank you for reporting this issue. The code was updated accordingly and (hopefully) I've got it fixed in 0.0.9

[ofulusan]

I tried using the latest version (0.0.9), but it still didn't work. I am using the code below, is there any problem with this?

<script setup>
import { Vue3MultiselectCheckboxed } from "vue3-multiselect-checkboxed"
import "vue3-multiselect-checkboxed/style.css"

import { ref } from 'vue';

const result = ref(['AF', 'AL'])
const setResult = (val) => {
  result.value = [...val]
}
const countryListAllIsoData = [
  { code: 'AF', code3: 'AFG', name: 'Afghanistan', number: '004' },
  { code: 'AL', code3: 'ALB', name: 'Albania', number: '008' },
  { code: 'DZ', code3: 'DZA', name: 'Algeria', number: '012' },
  { code: 'AS', code3: 'ASM', name: 'American Samoa', number: '016' },
]

const testResult = ref(['AF', 'AL'])
const setTestResult = (val) => {
    testResult.value = [...val]
}
const AllIsoData = [
  { code: 'AF', code3: 'AFG', name: 'Afghanistan', number: '004' },
  { code: 'AL', code3: 'ALB', name: 'Albania', number: '008' },
  { code: 'DZ', code3: 'DZA', name: 'Algeria', number: '012' },
  { code: 'AS', code3: 'ASM', name: 'American Samoa', number: '016' },
]
</script>

<template>
    <Vue3MultiselectCheckboxed
        :options="countryListAllIsoData"
        bindLabel="name"
        bindValue="code"
        :preSelected="result"
        :hasSearch="true"
        @onVSelect="setResult"
    />
    <Vue3MultiselectCheckboxed
        :options="AllIsoData"
        bindLabel="name"
        bindValue="code"
        :preSelected="testResult"
        :hasSearch="true"
        @onVSelect="setTestResult"
    />
</template>

<style scoped></style>