I am a beginner in Vue.js and I am looking to implement an input field with multiple tags (user skills) using a Vue.js component.
Although I have managed to make it work, I am struggling to figure out how to submit the tags in a form. Below is my code:
TagField.vue
<template>
<div>
<vue-tags-input
:tags="tags"
:autocomplete-items="filteredItems"
:add-only-from-autocomplete="true"
@tags-changed="newTags => tags = newTags"
/>
<input type="hidden" name="tags" :value="tags">
</div>
</template>
<script>
import VueTagsInput from '@johmun/vue-tags-input';
export default {
components: {
VueTagsInput,
},
props:[
'options',
'selection',
],
data() {
return {
tag: '',
tags: this.selection,
autocompleteItems: this.options,
};
},
computed: {
filteredItems() {
return this.autocompleteItems.filter(i => {
return i.text.toLowerCase().indexOf(this.tag.toLowerCase()) !== -1;
});
},
},
};
</script>
edit.blade.php
<div class="form-group">
<tag-field
:selection='@json($expert->skills()->get(['skills.name AS text', 'skills.id', 'skills.slug'])->makeHidden('pivot'))'
:options='@json(\App\Models\Skill::get(['name AS text', 'id', 'slug']))'
></tag-field>
</div>
Even though I tried to include a hidden field with the tags, the value appears as follows:
<input type="hidden" name="tags" value="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]">