如何从 api 获取 taginput 数据

Question

我在数据库中存储了一堆标签，可以通过 API 获取它们。我在我的模板中使用我的标签没有问题 - 除了我真正需要它们的地方：在标签列表中。

我是一个业余爱好者，也是 vue 的新手，所以我怀疑问题不是 Buefy 元素。当我用常规数组替换它时，taglist 起作用。更有可能是我对 Vue 如何以及何时获取各种数据的理解有所缺失？

我已尝试简化我的代码 - 希望不要过于简化。

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

标签没有显示在列表中，我的控制台告诉我 "tagger" 没有在 data() 等中定义

这是我的业余同步头脑不明白 Vue 的工作方式，对吧？请帮我弄清楚接下来要读什么。现在两天的大部分时间我都在 google 上兜圈子:-(

Answer 1

您需要在 data 和 getFilteredTags() 中分配 tagger 而不是分配 tagger。希望有用！

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

如何从 api 获取 taginput 数据

How to get taginput data from api

vue.js

buefy