How to make my VueJA/Buefy autocomplete display filtered options?
This was harder to find than I thought but trial an error and I realised that I had missed the following field:
field="Description"
You need to tell the autocomplete field which key from the object you want to use in the dropdown, in my case it was Description so working 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>