如何使用 JohMun/vue-tags-input 发布标签值

Question

我是 Vue.js 的新手。我想基于 Vue.js 组件创建具有多个标签（用户技能）的输入。

我设法让它工作，但我找不到如何在表单中发布我的标签。这是我的代码：

TagField.view

<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>

编辑.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>

如您所见，我尝试添加一个包含我的标签的隐藏字段，但值如下所示：

<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]">

Answer 1

经过一夜的睡眠，JSON.stringify(tags)在隐藏字段的值属性中完成了这项工作。