如何让我的 VueJA/Buefy 自动完成显示筛选选项？
How to make my VueJA/Buefy autocomplete display filtered options?
我正在使用 VueJS 和 Beufy 进行自动完成，我认为我可以正常工作，但似乎无法正确设置过滤器。当我输入描述时，输入框会过滤（尝试输入 ar 并正确过滤）但我看不到 select 的选项。这些选项实际上在那里，因为我可以单击其中一个选项，我将看到这样的数据：
第二个问题，大概相关的是，当我执行 select 这些不可见选项之一时，我收到以下错误：
vue:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'toLowerCase' of undefined"
我认为自动完成中的描述是空白的，所以 selecting 一个意味着没有任何 toLoweCase()。
请问我错过了什么？
<!DOCTYPE html>
<html>
<head>
<title>Product Search Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
</head>
<body>
<div id="app">
<div class="container">
<b-field label="Find a Product">
<b-autocomplete
:data="filteredDataArray"
v-model="item_entered"
placeholder="e.g. SKU87128398"
:loading="isFetching"
@select="option => selected = option">
</b-autocomplete>
</b-field>
</div>
{{selected}}
</div>
<script src="https://unpkg.com/vue"></script>
<!-- Full bundle -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<!-- Individual components -->
<script src="https://unpkg.com/buefy/dist/components/table"></script>
<script src="https://unpkg.com/buefy/dist/components/input"></script>
<script>
new Vue({
el: '#app',
data() {
return {
data: [],
selected: '',
isFetching: false,
item_entered: '',
initial_query: {
"message": "success",
"item_list": {
"Items": [{
"Description": "Marvel's Avengers",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "1118498",
"Type": "Product"
},
{
"Description": "LEGO Harry Potter Collection",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "28331719",
"Type": "Product"
},
{
"Description": "Star Wars Jedi: Fallen Order - Standard ",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "50510378",
"Type": "Product"
},
{
"Description": "Monster Hunter World Iceborne Master Edition",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "51580152",
"Type": "Product"
},
{
"Description": "High Street, Bruton - More Addresses",
"Highlight": "PEGI Rating: Ages 18 and Over",
"Id": "0AA-BA10",
"Type": "Group"
}
]
}
},
}
},
methods: {
getProductData: function(){
}
},
computed: {
filteredDataArray() {
return this.initial_query.item_list.Items.filter((option) => {
console.log(option.Description.toString().toLowerCase())
console.log(option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0)
return option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0
})
}
}
})
</script>
</body>
</html>
这比我想象的要难找，但尝试了一个错误，我意识到我错过了以下字段：
field="Description"
你需要告诉自动完成字段你想在下拉列表中使用对象中的哪个键，在我的例子中是描述所以工作代码是：
<!DOCTYPE html>
<html>
<head>
<title>Product Search Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
</head>
<body>
<div id="app">
<div class="container">
<b-field label="Find a Product">
<b-autocomplete
:data="filteredDataArray"
v-model="item_entered"
placeholder="e.g. SKU87128398"
:loading="isFetching"
field="Description"
@select="option => (selected = option)">
</b-autocomplete>
</b-field>
</div>
{{selected}}
</div>
<script src="https://unpkg.com/vue"></script>
<!-- Full bundle -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<!-- Individual components -->
<script src="https://unpkg.com/buefy/dist/components/table"></script>
<script src="https://unpkg.com/buefy/dist/components/input"></script>
<script>
new Vue({
el: '#app',
data() {
return {
data: [],
selected: '',
isFetching: false,
item_entered: '',
initial_query: {
"message": "success",
"item_list": {
"Items": [{
"Description": "Marvel's Avengers",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "1118498",
"Type": "Product"
},
{
"Description": "LEGO Harry Potter Collection",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "28331719",
"Type": "Product"
},
{
"Description": "Star Wars Jedi: Fallen Order - Standard ",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "50510378",
"Type": "Product"
},
{
"Description": "Monster Hunter World Iceborne Master Edition",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "51580152",
"Type": "Product"
},
{
"Description": "High Street, Bruton - More Addresses",
"Highlight": "PEGI Rating: Ages 18 and Over",
"Id": "0AA-BA10",
"Type": "Group"
}
]
}
},
}
},
methods: {
getProductData: function(){
}
},
computed: {
filteredDataArray() {
return this.initial_query.item_list.Items.filter((option) => {
console.log(option.Description.toString().toLowerCase())
console.log(option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0)
return option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0
})
}
}
})
</script>
</body>
</html>
我正在使用 VueJS 和 Beufy 进行自动完成，我认为我可以正常工作，但似乎无法正确设置过滤器。当我输入描述时，输入框会过滤（尝试输入 ar 并正确过滤）但我看不到 select 的选项。这些选项实际上在那里，因为我可以单击其中一个选项，我将看到这样的数据：
第二个问题，大概相关的是，当我执行 select 这些不可见选项之一时，我收到以下错误：
vue:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'toLowerCase' of undefined"
我认为自动完成中的描述是空白的，所以 selecting 一个意味着没有任何 toLoweCase()。
请问我错过了什么？
<!DOCTYPE html>
<html>
<head>
<title>Product Search Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
</head>
<body>
<div id="app">
<div class="container">
<b-field label="Find a Product">
<b-autocomplete
:data="filteredDataArray"
v-model="item_entered"
placeholder="e.g. SKU87128398"
:loading="isFetching"
@select="option => selected = option">
</b-autocomplete>
</b-field>
</div>
{{selected}}
</div>
<script src="https://unpkg.com/vue"></script>
<!-- Full bundle -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<!-- Individual components -->
<script src="https://unpkg.com/buefy/dist/components/table"></script>
<script src="https://unpkg.com/buefy/dist/components/input"></script>
<script>
new Vue({
el: '#app',
data() {
return {
data: [],
selected: '',
isFetching: false,
item_entered: '',
initial_query: {
"message": "success",
"item_list": {
"Items": [{
"Description": "Marvel's Avengers",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "1118498",
"Type": "Product"
},
{
"Description": "LEGO Harry Potter Collection",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "28331719",
"Type": "Product"
},
{
"Description": "Star Wars Jedi: Fallen Order - Standard ",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "50510378",
"Type": "Product"
},
{
"Description": "Monster Hunter World Iceborne Master Edition",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "51580152",
"Type": "Product"
},
{
"Description": "High Street, Bruton - More Addresses",
"Highlight": "PEGI Rating: Ages 18 and Over",
"Id": "0AA-BA10",
"Type": "Group"
}
]
}
},
}
},
methods: {
getProductData: function(){
}
},
computed: {
filteredDataArray() {
return this.initial_query.item_list.Items.filter((option) => {
console.log(option.Description.toString().toLowerCase())
console.log(option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0)
return option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0
})
}
}
})
</script>
</body>
</html>
这比我想象的要难找，但尝试了一个错误，我意识到我错过了以下字段：
field="Description"
你需要告诉自动完成字段你想在下拉列表中使用对象中的哪个键，在我的例子中是描述所以工作代码是：
<!DOCTYPE html>
<html>
<head>
<title>Product Search Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
</head>
<body>
<div id="app">
<div class="container">
<b-field label="Find a Product">
<b-autocomplete
:data="filteredDataArray"
v-model="item_entered"
placeholder="e.g. SKU87128398"
:loading="isFetching"
field="Description"
@select="option => (selected = option)">
</b-autocomplete>
</b-field>
</div>
{{selected}}
</div>
<script src="https://unpkg.com/vue"></script>
<!-- Full bundle -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<!-- Individual components -->
<script src="https://unpkg.com/buefy/dist/components/table"></script>
<script src="https://unpkg.com/buefy/dist/components/input"></script>
<script>
new Vue({
el: '#app',
data() {
return {
data: [],
selected: '',
isFetching: false,
item_entered: '',
initial_query: {
"message": "success",
"item_list": {
"Items": [{
"Description": "Marvel's Avengers",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "1118498",
"Type": "Product"
},
{
"Description": "LEGO Harry Potter Collection",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "28331719",
"Type": "Product"
},
{
"Description": "Star Wars Jedi: Fallen Order - Standard ",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "50510378",
"Type": "Product"
},
{
"Description": "Monster Hunter World Iceborne Master Edition",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "51580152",
"Type": "Product"
},
{
"Description": "High Street, Bruton - More Addresses",
"Highlight": "PEGI Rating: Ages 18 and Over",
"Id": "0AA-BA10",
"Type": "Group"
}
]
}
},
}
},
methods: {
getProductData: function(){
}
},
computed: {
filteredDataArray() {
return this.initial_query.item_list.Items.filter((option) => {
console.log(option.Description.toString().toLowerCase())
console.log(option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0)
return option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0
})
}
}
})
</script>
</body>
</html>