这个 Buefy (Vue + Bulma) 函数在这里做什么？

Question

我是 Buefy 的新手，对 Vue 也很陌生。 Buefy 关于表单的文档有一个示例自动完成here，它引用了数据字段上的计算属性。我认为该函数正在获取名称输入，然后相应地过滤数据数组。

我不确定的是它实际工作的机制，即为什么有两个返回语句，“选项”来自哪里，为什么小写方法在那里......

<template>
    <section>
        <p class="content"><b>Selected:</b> {{ selected }}</p>
        <b-field label="Find a JS framework">
            <b-autocomplete
                rounded
                v-model="name"
                :data="filteredDataArray"
                placeholder="e.g. jQuery"
                icon="magnify"
                clearable
                @select="option => selected = option">
                <template slot="empty">No results found</template>
            </b-autocomplete>
        </b-field>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                data: [
                    'Angular',
                    'Angular 2',
                    'Aurelia',
                    'Backbone',
                    'Ember',
                    'jQuery',
                    'Meteor',
                    'Node.js',
                    'Polymer',
                    'React',
                    'RxJS',
                    'Vue.js'
                ],
                name: '',
                selected: null
            }
        },
        computed: {
            filteredDataArray() {
                return this.data.filter((option) => {
                    return option
                        .toString()
                        .toLowerCase()
                        .indexOf(this.name.toLowerCase()) >= 0
                })
            }
        }
    }
</script>

Answer 1

这是一个 ES6 问题，因此要理解答案，您需要了解 .filter()。 DOCS

发生的是 JS 中的基本 函数式编程。我建议你阅读一下。

所以this.data 是一个数组，.filter() 是一个 JS 的方法，在数组项之间进行迭代，并返回匹配的选项。

所以基本上.filter() 返回一个匹配值的数组，然后第二个返回是返回从过滤器出来的数组到函数（filteredDataArray()）被调用的地方。