Laravelとvuetifyでアプリを作成していたのですが、Vuetifyに欲しいタグの機能がなかったので他で代用
Vue Tags Inputを使う。わかりやすくてシンプルで綺麗。これで十分。
インストール
npm install @johmun/vue-tags-input
使い方
<template>
<div>
<vue-tags-input
v-model="tag"
:tags="tags"
@tags-changed="newTags => tags = newTags"
/>
</div>
</template>
<script>
import VueTagsInput from '@johmun/vue-tags-input';
export default {
components: {
VueTagsInput,
},
data() {
return {
tag: '',
tags: [],
};
},
};
</script>
一番シンプルな使い方
tagは入力中のテキスト
tagsはすでに入力されたもの
@tags-changedは
newTagsはtags + tagした配列。つまり入力した後の配列
次にautocomplete
autocomplete
ついでにバリデーションも追加
<template>
<div>
<vue-tags-input
v-model="tag"
:tags="tags"
:autocomplete-items="filteredItems"
:validation="validation"
@tags-changed="newTags => tags = newTags"
@before-adding-tag="checkTag"
/>
</div>
</template>
<script>
import VueTagsInput from '@johmun/vue-tags-input';
export default {
components: {
VueTagsInput,
},
data() {
return {
tag: '',
tags: [],
validation: [{
classes: 'max-length',
rule: tag => tag.text.length > 20,
}],
autocompleteItems: [{
text: 'Spain',
}, {
text: 'France',
}, {
text: 'USA',
}, {
text: 'Germany',
}, {
text: 'China',
}],
};
},
methods:{
checkTag(obj) {
if (obj.tag.text.length > 20) console.log('タグは20文字まで')
else obj.addTag();
},
},
computed: {
filteredItems() {
return this.autocompleteItems.filter(i => {
return i.text.toLowerCase().indexOf(this.tag.toLowerCase()) !== -1;
});
},
},
};
</script>
autocompleteitemsはkeyがtextでないと機能しない
ここでのdataのvalidationは表示されているタグが赤く表示される。@before-adding-tagは@tags-changedの前に発火する。実際のvalidationは@before-adding-tagのcheckTagで行なっている。
まとめ
よく使う機能だと思うので、Vue.js用のUIコンポーネントフレームワークでこれ標準実装してくれればいいと思う。