Using vue-tags-input with Laravel

Question

I'm trying to use vue-tags-input with Laravel 7. I can get it to appear on the page in a form, and I can fill in values, but I can't see how to pre-populate the tags on load nor how to get the values submitted in a form. Ultimately I want to have multiple instances of this in a form (there are multiple tag fields), hence the need to wrap it as a reusable component.

Here's my component which wraps the original (in resources/js/components/TagsInput.vue):

<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 {
    name: "TagsInput",
    components: {
        VueTagsInput,
    },
    data() {
        return {
            tag: '',
            tags: []
        };
    },
};
</script>

The component is added to the Vue instance from resources/js/app.js (it's the only component):

const app = new Vue({
    el: '#app',
    components: {
        "tagsinput": require('./components/TagsInput.vue').default
    }
});

and here's how I want to use it from a blade template:

<tagsinput id="tags" name="tags" :tags="{{ $tags }}"></tagsinput>

There are several problems:

• The data passed through {{ $tags }} is rendered correctly(?) in the tags property (e.g. [{"key":"my tag","value":"My Tag"}]), but the tags do not appear in the resulting output. I gather from the docs that I should not declare tags as a prop as it will conflict with what's in data.
• The id and name properties are applied to the outermost element of the generated markup and not to the underlying input tag, so the values are not submitted by the containing form, so they're currently pretty, but useless.

There are some other elements I don't understand – I don't know what the tag property in data is for, nor why I might want the @tags-changed part.

I found this similar question, but that doesn't seem to have any way of passing data from Laravel. Overall I'm finding Vue very complex – it may be that it's the wrong tool for the job.

Answer 1

Try with:

<tagsinput :id="'tags'" :name="'tags'" :tags="{{ json_encode($tags) }}"></tagsinput>

in the past I had some troubles passing objects to Vue directly inside the template, and usually I solved with encoding the variable in blade and decoding it in vue.

Answer 2

If you want to populate the input tag, you need to get them from backend, for example with Laravel, and you need to call the backend inside Vue component:

 props: ['projectid'],

 beforeMount(){
    this.initProjectTags()
 },


 methods: {
 initProjectTags() {
      const url = '/projecttags/' + this.projectid; //Laravel route

      clearTimeout(this.debounce);

      this.debounce = setTimeout(() => {
        axios.get(url).then(response => {

               this.tags = response.data.projecttags.map( a => { return { text: a.name };} );

        }).catch( (error) => console.log(error) );

      }, 600);
    },
}

And in view you need to pass the input variable (in my example $projectid):

        <div id='app'>

            <tags-input
            :id="'tags'"
            :name="'tags'"
            :tags='{{ json_encode($projecttags) }}'
            :projectid="{{ $project->id }}"
            >
            </tags-input>

        </div>