问题描述
我正在使用VueJS和Beufy进行自动填充，我以为可以正常工作，但似乎无法正确设置过滤条件。输入描述时，输入框会进行过滤（尝试输入ar并正确过滤），但是我没有选择的选项。这些选项实际上就在那儿，我可以单击其中一个选项，然后我将看到如下数据：
第二个大概与之相关的问题是，当我选择这些不可见选项之一时，出现以下错误：
vue：634 [Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'toLowerCase'”
我认为自动完成中的描述为空白，因此选择一个意味着没有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",{
"Description": "Star Wars Jedi: Fallen Order - Standard ","Id": "50510378",{
"Description": "Monster Hunter World Iceborne Master Edition","Highlight": "PEGI Rating: Ages 12 and Over","Id": "51580152",{
"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",{
"Description": "Star Wars Jedi: Fallen Order - Standard ","Id": "50510378",{
"Description": "Monster Hunter World Iceborne Master Edition","Highlight": "PEGI Rating: Ages 12 and Over","Id": "51580152",{
"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>
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...