🍞

vue.js3でタグ付け[vue3-tags-input]

2022/09/21に公開

環境


フレームワーク バージョン
Laravel Framework 9.30.1
Vue.js 3.2.36

インストール


npm install vue3-tags-input --save-dev

使い方


SFCを用意

resources/js/components/TagInput.vue
<template>
  <input
      type="hidden"
      name="tags"
      :value="tagsJson"
  >
  <vue3-tags-input :tags="tags"
	  placeholder="タグを入力して下さい"
	  @on-tags-changed="newTags => tags = newTags"
  />
</template>
<script>
  import { defineComponent } from 'vue';
  import Vue3TagsInput from 'vue3-tags-input';

  export default defineComponent({
  components: {
      Vue3TagsInput
  },

  data() {
      return {
          tags: ['Laravel', 'VUE']
      }
  },
  computed: {
    tagsJson() {
      return JSON.stringify(this.tags)
    },
  }
})
</script>

SFC読み込み

resources/js/app.js
import TagsInput from './components/TagsInput.vue'

const app = createApp({
    components: {
        TagsInput,
    }
});
app.mount('#app');

baladeで適用

resources/views/index.blade.php
<tags-input>
</tags-input>

結果


Discussion

ログインするとコメントできます