Vue Material md-chips で削除時と挿入時(追加時)のイベント
md-delete
: 削除された文字列とそのインデックスが event として発行される。md-insert
: 挿入された文字列が event として発行される。
チップを変更するためのAPIを探しているのであれば、vモデルから直接文字列を挿入/削除することができます。
<template> <div> <md-chips :value="labels" class="md-primary" md-placeholder="検索キーワードを入力してください..." md-deletable @md-delete="onDelete" @md-insert="onInsert" ></md-chips> </div> </template> <script lang="ts"> import { defineComponent, PropType } from '@nuxtjs/composition-api' export default defineComponent({ name: 'Chips', props: { labels: { type: Array as PropType<string[]>, required: true } }, emits: ['on-chip-insert', 'on-chip-delete'], setup(_props, { emit }) { const onInsert = (e: Event) => { console.log('on Insert') emit('on-chip-insert', e) } const onDelete = (e: Event) => { emit('on-chip-delete', e) } return { onInsert, onDelete } } }) </script>