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

Question

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

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

<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()是一个方法，该方法在数组项之间迭代，并返回匹配的选项。

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