Vue 2-未捕獲的TypeError：cloned [i] .apply不是HTMLInputElement.invoker的函數（vue.esm.js？65d7：1810）錯誤

Question

我從標題中得到錯誤：

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

使用vue-cli（簡單的webpack）進行標准設置，這是我的組件：

<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>

奇怪的是，過濾器正在工作，但是每次我在輸入字段中鍵入內容時，都會出現此錯誤。 有人知道這會是什么嗎？

Answer 1

默認情況下，計算屬性是反應性的，實際上您不能將它們附加到事件處理程序中。

刪除調用計算屬性的keyup事件處理程序應該可以解決該問題。

            <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>

Answer 2

出於某種原因，我在data下有一個屬性名稱 ，在methods下有一個具有相同名稱的函數 。

刪除該屬性可修復類似的錯誤。

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