Issues with v-on:change not triggering method in nuxt.js

Despite my efforts, I can't seem to get this seemingly simple task to work. I came across a question on Stack Overflow that seemed to address the issue - how to fire an event when v-model changes

Here is the component that I am working with:

<template>
    <div>
        <input type="text" v-model="searchTerm" v-on:change="search" />
    </div>
</template>

<script>
export default {
   data() {
       return {
           searchTerm: ''
       }
   },
   methods: {
       search() {
           console.log(this.searchTerm);
       }
   }
}
</script>

I'm aiming to log the updated searchTerm every time a user types in the input field, but for some reason nothing appears in the console. Am I missing something here? Is this not the correct way to listen for v-model changes in nuxt?

Answer №1

To optimize your code, consider using @input rather than the @change event. Here is an example of how to implement it:

<template>
    <div>
        <input type="text" v-model="searchTerm" v-on:input="search" />
    </div>
</template>

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

Determine if a cell is editable within the `renderEditCell` function by using MUI

I am working with a MUI data grid that contains different cell types. I am currently seeking a way to implement user permission-based editing for cells in the grid. However, I only want the permission testing to occur when a user attempts to edit a cell, r ...

Guidance on modifying a sub row within a main row in Sails.js

I am currently working on a sails.js application This is the model structure for my application: name: String, address:String, appSettings: { header: String, color : String, font: String, } In my development process, I have utilized independ ...

Attempting to execute a PHP script through a JavaScript if statement

I have a form that requires validation with JavaScript. In one of the if statements, after all other conditions have been validated, I want to execute my PHP script that updates an SQL database with one of the passwords. Here is the final validation code: ...

The Vue2 @click event does not function properly when using v-html within a different component

I currently have a sign up form that includes an Alert component for displaying any errors. One of the conditions may prompt a message saying "You already have an account, click here to log in". The error messages are passed as props to the "Alert" compon ...

Utilizing Google+ Snippet and Open Graph Protocol for Enhanced Visibility

I am currently facing an issue with my dynamically built web page where the links shared on Google+ are not showing snippets properly. I have followed the example snippet for article rendering and documentation provided here: https://developers.google.com ...

Create a custom Android home screen widget using JavaScript or another programming language

I have a project in mind to create an Android App and include a home-screen widget. While I know it can be done with Native Android, my preference is to use JavaScript for development. Would anyone happen to know of any other solutions that allow the use ...

What is the best way to style output in jQuery for a specific div?

I have developed a tool for creating forms, but I am struggling to format the output neatly like pretty print. I have tried using \n and pre tags as well. allCont += "<label>"+insCleaned+"</label><input type='text' name= ...

Encountered a problem while executing the VuetifyJS template

I recently completed the installation of a vuetifyjs template by running the command vue init vuetifyjs/webpack-advanced The installation was successful, however, when I attempted to use the npm run dev command, I encountered the following error message: ...

The most effective method for modifying a prop in VueJS without altering the parent's data

In the main Vue component, there is an object named user. If I pass this user object as a prop to a child component: <child :user="user"></child> When updating user.name in the child component, the changes also reflect in the parent componen ...

Struggling with jQuery fadeIn and fadeOut in IE8?

I am struggling to understand why my fadeIn, fadeOut, and corner() functions are not working in IE8 on my website at . They were functioning properly before, but now they seem to be broken. Can anyone pinpoint the issue causing this problem? If you click ...

Leveraging keypress() for managing all Vue interactions

I am in the process of converting a game from Javascript/jQuery to Vue. This particular game is entirely controlled by keyboard input, with no mouse interaction involved. Players navigate through the game using the "up" and "down" arrow keys to cycle thro ...

JavaScript error caused by incorrect JSON parsing

Encountering Another Issue. Here's the Relevant Code: if(localStorage.getItem("temporaryArray")){ var temporaryArray = JSON.parse(localStorage.getItem("temporaryArray")); }else{ var temporaryArray = []; } Essentially, what this code snippet ...

Utilizing Angular to nest a simple component within another component and display it exclusively on a targeted page or parent component

Currently, I am developing a mobile app using Ionic 3 and have created 2 components - Dumb or presentation components. The first component is the <ion-navbar>, which contains another component called <header-wallet-badge></header-wallet-badg ...

How can I filter an array by a nested property using Angular?

I need help with objects that have the following format: id: 1, name: MyObj properties: { owners: [ { name:owner1, location: loc1 }, { name:owner2, location: loc1 } ] } Each object can have a different number of owners. I' ...

What is the procedure for verifying the type of an element using chai?

Is there a way to determine if an element is either an "a" tag or a "div" tag? I've tried the following code, but it's not working as expected: it('has no link if required', () => { const wrapper = shallow(<AssetOverlay a ...

What is the best way to halt a specific function in jQuery?

I recently developed a website for my photographer friend, and I implemented a feature where the home page is initially blurred. Visitors can click a button to unblur the content. While the functionality works smoothly, there's one issue - every time ...

Verify if the value in a textbox exceeds the number entered in an array of textboxes

My goal is to compare the value of a single text box, labeled as "totalmarkstoall", with multiple arrays of text boxes labeled as "marksscored". The JavaScript code below is set up to compare these values using a key up function. The issue I am facing is ...

Creating a Vue2 modal within a v-for loop to display a dynamic

Recently, I've been working on implementing a vue2 modal following the instructions provided in the official Vue documentation at https://v2.vuejs.org/v2/examples/modal.html. The code snippet I have been using looks something like this: <tbody v-i ...

ExtJS web displays appear differently when viewed on Chrome's toggle device mode versus a mobile browser

Greetings, I have been working on developing a web application that can be accessed through a mobile browser. Initially, I created the web application and tested it in mobile mode using Chrome's simulation feature. However, when I tried accessing th ...

Suggestions for updating the 'begin' and 'finish' variables transmitted through ajax on fullcalendar?

Shown below is the URL to request JSON data via Ajax: '/php/get-events.php?start=2015-05-31&end=2015-06-07&_=1433154089490'. This query will fetch JSON data from 2015-05-31 to 2015-06-07. However, I am looking to retrieve data over a ...