0

我有一堆标签存储在数据库中，可以通过 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>

标签未显示在列表中，我的控制台告诉我 data() 等中未定义“标记器”。

这是我的业余同步思维没有理解 Vue 的工作方式，对吧？请帮我弄清楚接下来要读什么。两天的大部分时间里，我一直在谷歌上转圈子:-(

4

1 回答 1

1

而不是分配tagger，您需要this.tagger在两者内部分配data和getFilteredTags()。希望它会奏效！

    <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>
于 2019-09-26T10:49:07.877 回答