CODEWITHSUNDEEP
javascriptlaravelvue.js
Radyum
Radyum

Reputation: 101

How to post tags values with JohMun/vue-tags-input

I'm new to Vue.js. I want to create an input with multiple tags (user skills) based on a Vue.js component.

I managed to make it work, but I can't find how to post my tags in a form. Here 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>

As you can see, I tried to add an hidden field containing my tags, but the value looks like this:

<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],[object Object],[object Object]">

Upvotes: 2

Views: 839

Answers (1)

Radyum
Radyum

Reputation: 101

After a night of sleep,

JSON.stringify(tags)

in the value attribute of the hidden field did the job.

Upvotes: 1

Related Questions