Vue

Search results

ChipListModel API in Vue Chips API component

Interface for a class ChipList

Properties

beforeClick
`EmitType<ClickEventArgs>`

Triggers before the click event of the chip is fired. This event can be used to prevent the further process and restrict the click action over a chip.

    <template>
        <ejs-chiplist id="chip" selection="Single" v-on:beforeClick="chipclick">
            <e-chips>
                <e-chip text="Andrew"></e-chip>
                <e-chip text="Janet"></e-chip>
                <e-chip text="Laura"></e-chip>
                <e-chip text="Margaret"></e-chip>
            </e-chips>
        </ejs-chiplist>
    </template>

    <script>
        import Vue from 'vue';
        import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';

        Vue.use(ChipListPlugin);

        export default {
            methods: {
                chipclick: function (e) {
                    alert('you have selected ' + e.text);
                }
            }
        }
    </script>

click
`EmitType<ClickEventArgs>`

Triggers when a chip is clicked.

    <template>
        <ejs-chiplist id="chip" v-on:click.native="chipclick">
            <e-chips>
                <e-chip text="Send a text"></e-chip>
                <e-chip text="Set a remainder"></e-chip>
                <e-chip text="Read my emails"></e-chip>
                <e-chip text="Set alarm"></e-chip>
            </e-chips>
        </ejs-chiplist>
    </template>

    <script>
        import Vue from 'vue';
        import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';

        Vue.use(ChipListPlugin);

        export default {
            methods: {
                chipclick: function (e) {
                    alert('you have clicked ' + e.target.textContent);
                }
            }
        }
    </script>

created
`EmitType<Event>`

Triggers when the component is created successfully.

    <template>
        <ejs-chiplist id="chip" text="Andrew" v-on:created="create">
        </ejs-chiplist>
    </template>

    <script>
        import Vue from 'vue';
        import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';

        Vue.use(ChipListPlugin);

        export default {
            methods: {
                create: function (e) {
                    alert('Component rendered successfully');
                }
            }
        }
    </script>

delete
`EmitType<DeleteEventArgs>`

Fires before removing the chip element.

    <!DOCTYPE html>
    <template>
        <ejs-chiplist id="chip" enableDelete="true" v-on:delete="chipclick">
            <e-chips>
                <e-chip text="Andrew"></e-chip>
                <e-chip text="Janet"></e-chip>
                <e-chip text="Laura"></e-chip>
                <e-chip text="Margaret"></e-chip>
            </e-chips>
        </ejs-chiplist>
    </template>

    <script>
        import Vue from 'vue';
        import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';

        Vue.use(ChipListPlugin);

        export default {
            methods: {
                chipclick: function (e) {
                    alert('you have deleted ' + e.text);
                }
            }
        }
    </script>

deleted
`EmitType<ChipDeletedEventArgs>`

Triggers when the chip item is removed.

avatarIconCss
`string`

Specifies the icon CSS class for the avatar in the chip.

    <template>
        <ejs-chiplist id="chip" text="Janet Leverling" :avatarIconCss='Icon'></ejs-chiplist>
    </template>
    <style>
        #chip .janet {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
        }
    </style>
    <script>
        import Vue from 'vue';
        import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';
        Vue.use(ChipListPlugin);

        export default {
            data: function () {
                return {
                    Icon: "janet"
                };
            }
        }
    </script>

avatarText
`string`

Specifies the customized text value for the avatar in the chip.

    <template>
        <ejs-chiplist id="chip" text="Janet Leverling" :avatarText='text'></ejs-chiplist>
    </template>

    <script>
        import Vue from 'vue';
        import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';
        Vue.use(ChipListPlugin);

        export default {
            data: function () {
                return {
                    text: "J"
                };
            }
        }
    </script>

chips
`string[]` | `number[]` | `ChipModel[]`

This chips property helps to render ChipList component.

    <template>
        <ejs-chiplist id="chip">
            <e-chips>
                <e-chip text="Andrew"></e-chip>
                <e-chip text="Janet"></e-chip>
                <e-chip text="Laura"></e-chip>
                <e-chip text="Margaret"></e-chip>
            </e-chips>
        </ejs-chiplist>
    </template>

    <script>
        import Vue from 'vue';
        import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';

        Vue.use(ChipListPlugin);

        export default {}
    </script>
    ```

<h3 class="doc-prop-wrapper" id="cssclass" data-Path="cssclass-cssClass">
<a href="#cssclass" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>cssClass</span>

<span class="doc-prop-type"> `string`
</span>

</h3>


Specifies the custom classes to be added to the chip element used to customize the ChipList component.

```html
    <template>
        <ejs-chiplist id="chip" text="Janet Leverling" :cssClass='style'></ejs-chiplist>
    </template>

    <script>
        import Vue from 'vue';
        import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';

        Vue.use(ChipListPlugin);

        export default {
            data: function () {
                return {
                    style: "e-outline"
                };
            }
        }
    </script>

enableDelete
`boolean`

Enables or disables the delete functionality of a chip.

    <!DOCTYPE html>
    <template>
        <ejs-chiplist id="chip" :enableDelete='bool'>
            <e-chips>
                <e-chip text="Andrew"></e-chip>
                <e-chip text="Janet"></e-chip>
                <e-chip text="Laura"></e-chip>
                <e-chip text="Margaret"></e-chip>
            </e-chips>
        </ejs-chiplist>
    </template>

    <script>
        import Vue from 'vue';
        import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';

        Vue.use(ChipListPlugin);

        export default {
            data: function () {
                return {
                    bool: "true",
                    filterSelected: [1, 3]
                };
            }
        }
    </script>

enablePersistence
`boolean`

Enable or disable persisting component’s state between page reloads.

enableRtl
`boolean`

Enable or disable rendering component in right to left direction.

enabled
`boolean`

Specifies a value that indicates whether the chip component is enabled or not.

htmlAttributes
`{ [key: string]: string }`

Allows additional HTML attributes such as aria labels, title, name, etc., and accepts n number of attributes in a key-value pair format.

leadingIconCss
`string`

Specifies the leading icon CSS class for the chip.

    <template>
        <ejs-chiplist id="chip" text="Janet Leverling" :leadingIconCss='Icon'></ejs-chiplist>
    </template>
    <style>
        #chip .janet {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
        }
    </style>
    <script>
        import Vue from 'vue';
        import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';
        Vue.use(ChipListPlugin);

        export default {
            data: function () {
                return {
                    Icon: "janet"
                };
            }
        }
    </script>

leadingIconUrl
`string`

Specifies the trailing icon url for the chip.

locale
`string`

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

selectedChips
`string[]` | `number[]` | `number`

Sets or gets the selected chip items in the chip list.

    <template>
        <ejs-chiplist id="chip" selection="Multiple" :selectedChips='filterSelected'>
            <e-chips>
                <e-chip text="Andrew"></e-chip>
                <e-chip text="Janet"></e-chip>
                <e-chip text="Laura"></e-chip>
                <e-chip text="Margaret"></e-chip>
            </e-chips>
        </ejs-chiplist>
    </template>

    <script>
        import Vue from 'vue';
        import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';

        Vue.use(ChipListPlugin);

        export default {
            data: function () {
                return {
                    filterSelected: [1, 3]
                };
            }
        }
    </script>

selection
`Selection`

Defines the selection type of the chip. The available types are:

Input chip
Choice chip
Filter chip
Action chip

text
`string`

Specifies the text content for the chip.

    <template>
        <ejs-chiplist id="chip" :text='name'></ejs-chiplist>
    </template>

    <script>
        import Vue from 'vue';
        import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';

        Vue.use(ChipListPlugin);

        export default {
            data: function () {
                return {
                    name: "Janet Leverling"
                };
            }
        }
    </script>

trailingIconCss
`string`

Specifies the trailing icon CSS class for the chip.

    <template>
        <ejs-chiplist id="chip" text="Janet Leverling" :trailingIconCss='Icon'></ejs-chiplist>
    </template>

    <script>
        import Vue from 'vue';
        import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';

        Vue.use(ChipListPlugin);

        export default {
            data: function () {
                return {
                    Icon: "e-dlt-btn"
                };
            }
        }
    </script>

trailingIconUrl
`string`

Specifies the trailing icon url for the chip.

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

ChipListModel API in Vue Chips API component

Properties

beforeClick EmitType<ClickEventArgs>

click EmitType<ClickEventArgs>

created EmitType<Event>

delete EmitType<DeleteEventArgs>

deleted EmitType<ChipDeletedEventArgs>

avatarIconCss string

avatarText string

chips string[] | number[] | ChipModel[]

enableDelete boolean

enablePersistence boolean

enableRtl boolean

enabled boolean

htmlAttributes { [key: string]: string }

leadingIconCss string

leadingIconUrl string

locale string

selectedChips string[] | number[] | number

selection Selection

text string

trailingIconCss string

trailingIconUrl string