v-on:keyup not firing function

Question

For some reason I cannot get my keyup event to fire. I would like it to listen to any and all keyup events as I am trying to make a live search function

Here is my code:

<template>
...
<b-form-input id="search"
              v-model="query"
              type="text"
              placeholder="Search"
              v-on:keyup="find(search, query)">
</b-form-input>

....

</template>

<script type="text/javascript">
export default {
data() {
  return {
    options: [
        { text: 'All', value: 'All' },
        { text: 'Members', value: 'Members' },
        { text: 'Groups', value: 'Groups' },
        { text: 'Events', value: 'Events' }
    ],
    search: 'All',
    query: '',
    results: []
  }
},

methods: {
    find: function (param = 'All', string = '') {
        axios.get('/api/search/' + param.toLowerCase() + '?query=' + string)
    .then(({data}) => {
        this.results = data.data;
    });
    }
}}
</script>

I've only been able to do v-on:change to get it to fire.

Answer 1

b-form-input only supports input and change event.

To use keyup event listener, add .native to it.

@keyup.native="..."

From https://bootstrap-vue.js.org/docs/components/form-input#component-reference