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

Question

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

我不太确定的是它实际工作的机制，即为什么有两个 return 语句，'options' 来自哪里，为什么小写方法在那里.. .

<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 方法，returns 匹配选项。

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

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

What is this Buefy (Vue + Bulma) function doing here?

javascript

ecmascript-6

vue.js

buefy