[Vuejs]-How to get taginput data from api

1👍

Instead of assigning tagger, you need to assign this.tagger inside both data and getFilteredTags(). Hope it will work!

    <template>
        <b-field label="Filter by tags">
            <b-taginput
                v-model="tags"
                :data="filteredTags"
                autocomplete                        
                field="tag"
                icon="label"
                type="is-warning"
                placeholder="Pick a tag"
                @typing="getFilteredTags"
                > 
            </b-taginput>
        </b-field>
    </template>

    <script>
    import axios from "axios";
    var _ = require('lodash');

    export default {
        data: function() {
            return {
                tagger: [],
                filteredTags: this.tagger,
                tags: [],
            }
        },
        mounted(): {
         this.getTagger()
        },
        methods: {
           getFilteredTags(text) {
                this.filteredTags = this.tagger.filter((option) => {
                    return option.tag
                        .toString()
                        .toLowerCase()
                        .indexOf(text.toLowerCase()) >= 0
                })
            },
           getTagger() {
                axios.get('url_to_working_api')
                .then(response => {
                 const tagg = response.data.body;
                 const resultArray = [];
                 for (let key in tagg) {
                    resultArray.push(tagg[key]);
                    }
                 this.tagger = _.sortBy(resultArray, ['tag']);
                 console.log(this.tagger);
            })
            .catch(error => {
                console.log(error);
            });                 
            }
        }
    }
    </script>

Leave a comment