#javascript #vue.js #buefy
#javascript #vue.js #buefy
Вопрос:
Я использую VueJS и Beufy для автозаполнения, и я думал, что у меня это работает, но, похоже, не получается правильно настроить фильтр. Когда я ввожу описание, поле ввода фильтруется (попробуйте ввести ar, и оно правильно фильтрует), но я не вижу вариантов для выбора. Параметры физически существуют, так как я могу нажать на один из параметров, и я увижу свои данные следующим образом:
Вторая проблема, предположительно связанная с тем, что когда я выбираю один из этих невидимых параметров, я получаю следующую ошибку:
vue: 634 [Предупреждение Vue]: ошибка при рендеринге: «Ошибка типа: не удается прочитать свойство ‘в нижнем регистре’ неопределенного»
Я думаю, что описания пусты в автозаполнении, поэтому выбор одного из них означает, что в 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>
Ответ №1:
Это было сложнее найти, чем я думал, но пробная ошибка, и я понял, что пропустил следующее поле:
поле =»Описание»
Вам нужно указать в поле автозаполнения, какой ключ из объекта вы хотите использовать в выпадающем списке, в моем случае это было описание, поэтому рабочий код:
<!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>