CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Sasha
Sasha

Reputation: 8705

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

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?

Upvotes: 1

Views: 3801

Answers (2)

ecairol
ecairol

Reputation: 6573

For some reason, I had a property name under data and a function with the same name under methods.

Removing the property fixed a similar error.

new Vue({
    el: '#elem',
    data: {
      function_name: null,  // <- removed this
    },
    methods: {
      function_name: function() {
        // ...
      }
    }
});

Upvotes: 1

Belmin Bedak
Belmin Bedak

Reputation: 9201

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>

Upvotes: 4

Related Questions