是否可以使用Vue Buefy自动完成与搜索选择?

Question

我想选择输入，这将能够在数据源中搜索项目。根据文档选择它似乎是不可能通过选择组件做到这一点。我试图使用自动完成组件代替它，但它不起作用。下面是两个示例的代码。它们都不能按预期工作(select with search with key as v-model value)

<b-autocomplete
v-model="company.country"
:data="selectCountries"
:field="value"
:keep-first="keepFirst"
placeholder="Select country"
:open-on-focus="openOnFocus"
<b-field label="Find a name">
@select="option => (selected = option)"
:clearable="clearable"
>
</b-autocomplete>
</b-field>
<b-select v-model="company.location" expanded>
<option v-for="option in selectCountries"
:value="option.key"
:key="option.key">
{{ option.value }}
</option>
</b-select>
</field>
...
data() {
return {
selectCountries: [
{"value": "slovakia", "key": "SK"}, {"value": "England", "key": "EN"}
],
}
}

Answer 1

为了使自动完成工作，您需要自己过滤列表并将结果传递回组件。为此，我们创建了如下的计算属性:

<template>
<section>
<b-autocomplete v-model="country" :data="filteredCountries" field="name" :keep-first="true" placeholder="Select Country" :open-on-focus="true"></b-autocomplete>
</section>
</template>
<script type="text/javascript">
export default {
data: () => ({
country: '',
countries: [
{
name: 'Slovakia',
key: 'SK'
},
{
name: 'England',
key: 'EN'
},
{
name: 'United States of America',
key: 'USA'
}
]
}),
computed: {
filteredCountries () {
if (this.country !== null) {
return this.countries.filter((option) => {
return option.name.toString().toLowerCase().indexOf(this.country.toLowerCase()) >= 0
})
} else {
return this.countries
}
}
}
}
</script>