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>