Question

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

我是vue的业余爱好者和新手，因此我怀疑问题不是Buefy元素。当我将其替换为常规数组时，标签列表将起作用。我更可能了解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（）等中未定义“ tagger”。

这是我的业余同步头脑，无法理解Vue的工作方式，对吗？请帮助我弄清楚接下来要读什么。我已经在Google上转了两天的大部分时间：-（

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

如何从api获取taginput数据

1 个答案: