After some trial and error, I finally found the missing piece that made this task harder than expected:
field="Description"
To make the autocomplete field work properly, you must specify the key from the object to use in the dropdown. In my case, it was "Description", so the correct code is:
<!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>