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

I encountered the following error:

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

I have set up my project using vue-cli (simple webpack), and below is the code for 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>

Despite the fact that the filter functionality is working, I keep receiving the mentioned error whenever I input text into the search field. Any suggestions on what could be causing this issue?

Answer №1

By default, computed properties are reactive and cannot be attached to event handlers.

The issue can potentially be resolved by removing the keyup event handler that triggers the computed property.


<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

It was odd that I had a variable named under data and a method with the identical name under methods.

Deleting the variable resolved a similar issue.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming the data retrieved from the API into a well-organized object in Vue.js

Currently, I am utilizing the vue-meta library to incorporate meta tags into my Vue project. What I'm attempting to do now is populate my meta tags using the API response data. Here's an example output from the API when I log 'response.data. ...

Discovering Vue: Utilizing variables to bind to array keys within components

Is there a way to use variable array keys for bindings in a custom component? For example, how can I make the title 'Title 1 for default settings' if componenttype is set to 'default', and 'Title 1 for guest settings' if compo ...

When a directive is passed a string with HTML tags, the tags are not displayed/rendered as expected

When it comes to passing a string with HTML content to my Angular directive, I've encountered an issue where the rendered output treats the HTML as text. While researching possible solutions, most of them seem to rely on using ng-bind-html directive, ...

The Bootstrap CDN is malfunctioning and displaying errors in the console

I attempted to incorporate Bootstrap 4.5 using the CDN provided on their main website. However, after adding all the code lines to my project, I encountered numerous issues with my custom CSS and the Bootstrap carousel failing to function. Upon inspecting, ...

Arrange pictures into an array and showcase them

I'm encountering some difficulties with organizing my images in an array and displaying them in a canvas element. Javascript code snippet canvas = document.getElementById('slideshow'); canvasContent = canvas.getContext('2d'); va ...

Facing some unexpected issues with integrating Django and AngularJS, unclear on the cause

In my simple Angular application, I encountered an issue. When I run the HTML file on its own in the browser, the variable name "nothing" is displayed as expected. However, once I integrate the app into Django by creating a dummy view that simply calls a t ...

How can I access the feed of a single user using the Facebook API

I have yet to experience working with Facebook APIs, but I am interested in developing a basic app that will display posts from a specific Facebook user. I would prefer not to enable login for multiple users, just keep it simple. My goal is to create an a ...

Encountering an issue with Angular virtual scrolling: ViewDestroyedError arises when trying to utilize a destroyed view during detectChanges operation

My implementation involves using virtual scrolling from the cdk within a trigger-opening sidenav on a mat-radio element. Here is the code snippet: ts - ... @Component({ selector: 'app-generic-options-list', templateUrl: './generic-opt ...

Iterate through the list elements by utilizing jQuery

I am working with HTML code that looks like this: <ul class="lorem"> <li>text</li> <li>text</li> <li>hello</li> <li>text</li> </ul> Can someone help me figure out how to loop through ...

Modifying the default label for each bubble on a bubble chart with chartjs-plugin-datalabels

Is there a way to add labels to each bubble in the bubble chart using chartjs-plugin-datalabels? For every bubble, I'd like to display the label property of each object within the data.dataset array, such as "Grapefruit" or "Lime". Currently, I'm ...

Cannot upload pictures using pixi.js PIXI.Texture.from()

I'm currently developing a web game using React with PixiJS. I am trying to incorporate images from my local directory into Pixi.js. For reference, I found this helpful website: Here are the snippets of code that I have used: import * as PIXI from & ...

When the enter key is pressed in a contenteditable div, line breaks are disregarded

Is there a way to ensure that when the return key is pressed to start a new line for a post, the output actually starts on a new line? I've been having trouble with this and would like to know the most common solution. Check out the demo below for te ...

Dynamically adjusting the width of an HTML element with ng-style using percentage values in AngularJS

I am facing a challenge where I need to display a progress bar in my UI based on a percentage value stored in a JSON response object. Here is an example of the JSON object: { completionPercent: 42 } The desired UI outcome should look like this: ┌ ...

Utilizing Html.BeginCollectionItem helper to pass a collection with only a glimpse of the whole picture

After seeking guidance from Stephen Muecke on a small project, I have encountered an issue. The javascript successfully adds new fields from the Partial View and connects them to the model through "temp" values set by the controller method for the partial ...

Encountered a connection error while attempting to establish a connection in Node.js

Every time I try to execute the code, I encounter this error message: throw new Error('Most middleware (like ' + name + ') is no longer bundled with express and must be installed separately ^ Error: Most middleware(like BodyParser) is ...

Navigating through props provided within a setup function in Vuejs using the Composition API

I am facing an issue when trying to pass an object into a child component using props in the Composition API setup function of Vue. Instead of utilizing 'Abe', I want to run a query from firebase based on the displayName property of the user. As ...

JavaScript is displaying Not a Number (NaN) instead of the expected value

Currently, I am facing an issue with retrieving the user's work duration from a database column stored in minutes. My goal is to convert this value to HH:mm format to calculate the total hours worked per week, but I'm encountering obstacles. < ...

Combining a form and table on a single webpage, I am curious how to utilize the form to update the table effectively using Express and Node.js

Seeking guidance in website development as I face a particular challenge. I aim to create a dynamic search page for a website. The form should allow users to select a location or category, with the same page updating with relevant results. Despite succes ...

Opening the Gmail app from a link using JavaScript

What is the best way to open the Gmail app from a hyperlink? This link opens WhatsApp <a href="https://wa.me/">whatsapp</a> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a1f190f ...

What are some ways I can make my content come alive on my website using the Tympanus examples

After spending hours searching for a way to add animation to my content, I finally found a technique that seemed promising. Despite following the same steps as outlined in the tutorial I found, I was disappointed to discover that there was no animation o ...