Buefy autocomplete for font awesome

by jorgeluis

HTML

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<div id="app" class="container">
    
    <section>
        <div class="field">
          <label
            for="icon-select"
            class="label">Icon</label>

            <b-autocomplete
                id="icon-select"
                v-model="name"
                :data="filteredDataArray"
                placeholder="Select..."
                @select="option => selected = option">


                <template slot-scope="props">
                    <div class="media">
                        <div class="media-left">
                            <img width="24" :src="`/assets/img/icons/icon--${props.option}.svg`">
                        </div>
                        <div class="media-content">
                            {{ props.option }}
                        </div>
                    </div>
                </template>

          </b-autocomplete>
        </b-field>
    </section>

</div>

JavaScript

const example = {
    data() {
        return {
            data: [
                'fa-user',
                'fa-trophy',
                'fa-university'
            ],
            name: '',
            selected: null
        }
    },
    computed: {
        filteredDataArray() {
            return this.data.filter((option) => {
                return option
                    .toString()
                    .toLowerCase()
                    .indexOf(this.name.toLowerCase()) >= 0
            })
        }
    }
}

const app = new Vue(example)
app.$mount('#app')