Vue 2 - Uncaught TypeError: cloned[i].apply is not a function at HTMLInputElement.invoker (vue.esm.js?65d7:1810) 错误

2022-01-25 00:00:00 javascript vue.js vue-component vuejs2

I am getting the error from the title:

Uncaught TypeError: cloned[i].apply is not a function
    at HTMLInputElement.invoker (vue.esm.js?65d7:1810)

Made standard setup with vue-cli (simple webpack), and this is my component:

<template>
    <div class="column is-4">
        <nav class="panel">
            <p class="panel-heading">
                Authors in our library
            </p>

            <div class="panel-block">
                <p class="control has-icons-left">
                    <input class="input is-small" type="text" placeholder="Search"
                        v-model="search"
                        @keyup="filterAuthors">
                        <span class="icon is-small is-left">
                        <i class="fa fa-search"></i>
                    </span>
                </p>
            </div>

            <a class="panel-block is-active" v-for="author in filterAuthors">
                <span class="panel-icon">
                  <i class="fa fa-book"></i>
                </span>
                {{ author }}
            </a>

        </nav>
    </div>
</template>

<script>

    export default {
        data () {
            return {
                'search' : ''
            }
        },
        computed: {
            filterAuthors() {
                let search = this.search.toLowerCase();

                return this.$store.state.authors.filter((author) => {
                    return author.toLowerCase().indexOf(search) >= 0;
                })


            }
        }
    }

</script>

Strange part is that the filter is working, but every time I type into the input field, I get this error. Anyone have any idea what can it be?

解决方案

Computed properies are reactive by default, and in fact you can't attach them to event handler.

Removing the keyup event handler that calls computed property should fix the problem.

            <p class="control has-icons-left">
                <input class="input is-small" type="text" placeholder="Search">
                    <span class="icon is-small is-left">
                    <i class="fa fa-search"></i>
                </span>
            </p>

相关文章