How to get taginput data from api

Question

I've got a bunch of tags stored in a database and can fetch them via an API. I've got no problems using my tags inside my template - except where I actually need them: in the taglist.

I'm an amateur and a newbie at vue, so I suspect the problem is not the Buefy element. The taglist works when I replace it with a regular array. More likely there is something missing in my understandig of how and when Vue gets the various data?

I've tried to simplyfy my code - hope it's not too simplified.

<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"
            > {{ getTagger }}
        </b-taginput>
    </b-field>
</template>

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

export default {
    data: function() {
        return {
            tagger: [],
            filteredTags: tagger,
            tags: [],
        }
    },
    methods: {
       getFilteredTags(text) {
            this.filteredTags = tagger.filter((option) => {
                return option.tag
                    .toString()
                    .toLowerCase()
                    .indexOf(text.toLowerCase()) >= 0
            })
        },
    },
    computed: {
        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>

The tags does not display in the list, my console tells me that "tagger" is not defined in data() etc.

This is my amateur synchronous mind not getting the way Vue works, right? Please help me figure out what to read next. I've been going in circles on google for the better part of two days now :-(

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