multiselect :value error

[kang]

HI,

I want to erase the 'MultiSelect' data by pressing the button.

If I put:value in a multi-select

There is an error in the following parts.

Except for :value, everything is fine.

I followed the code in url below.

https://www.telerik.com/kendo-vue-ui/components/dropdowns/multiselect/binding/

The tagList in multiselect has an error

TypeError: Cannot read properties of undefined (reading 'toString')
    at Proxy.<anonymous> (TagList.js?v=28c65b14:115:67)

TagList.js

 

 

[Vessy]

Hi, kang,

The MultiSelect accepts multiple values and as such, it expects to receive an array to its :value prop:

• https://stackblitz.com/edit/ke2m7y?file=src%2Fmain.vue 

      <multiselect
        :style="{ width: '230px' }"
        :value="['Small']"
        :data-items="sizes"
      >
      </multiselect>

Can you test it and see if this setup is working at your end as well?

Regards,
Vessy
Progress Telerik

[kang]

HI, vessy

 

The selected data must be contained in the 'values'.
I'm not pressing multiple choices
If you create a button and click the button, you need to remove one data from the multiselect.

 

<template>

  <div class="example-wrapper">

    <div>

      <div>T-shirt sizes:</div>

      <multiselect

        :style="{ width: '230px' }"

        :data-items="sizes"

        :value="values"

      >

      </multiselect>

    </div>

  </div>

</template>

<script>

import { MultiSelect } from '@progress/kendo-vue-dropdowns';

export default {

  components: {

    multiselect: MultiSelect,

  },

  data: function () {

    return {

      values: [],

      sizes: ['X-Small', 'Small', 'Medium', 'Large', 'X-Large', '2X-Large'],

    };

  },

};

</script>

[kang]

And I'm using vue3. The code may vary slightly.

[Vessy]

Hi, kang,

You can use the same approach, but assigning the desired value directly to the `values` array even if the allow value count is only one.

values: ['Small']
//or
const values = ref(['Small']);

For convenience, I prepared the following sample where you can check the add/remove value buttons - https://stackblitz.com/edit/ke2m7y-utcugk?file=src%2Fmain.vue