Using Vue to Emit Events Without Passing Values

Hello there,

I'm encountering an issue with the input toggle switch value in my Vue component. Whenever it is emitted to the parent component, the value seems to be flipped to its reverse. I am relatively new to Vue and have been experimenting with it for a few days now. While I can see the attribute value in both areas using vue dev tools, the value becomes reversed when passed to the parent component. A quick fix would be adding a "!" to the incoming value, but I'd like to understand why this behavior is happening.

Parent Component Update

updateMiddle(article){
  this.article.meta_title = article.meta_title;
  this.article.meta_desc = article.meta_desc;
  this.article.published = article.published;
  this.article.is_review = !article.is_review; // Quick fix 
}

Child Component Emit

methods: {
  update() {
    this.$emit('changeMiddle',this.article)
  }

Input Element

<input id="tc-review" type="checkbox" hidden="hidden" name="is_review" 
       v-model="article.is_review" v-on:input="update">

Answer №1

The issue lies in the fact that the input event is triggered before the v-model binding actually updates the data.

An easy fix is to utilize the change event instead. Here's an example:

<input v-model="article.is_review" @change="update">

Check out a simplified demo here ~ http://jsfiddle.net/u20h5tzv/

Pro tip: Toggle it back to @input and observe the timing discrepancy.

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

Challenges arise when attempting to integrate the jquery plugin (jlembed) due to conflicts with namespaces

I've been struggling to make jlembed work, but I keep encountering errors in the Chrome debugger. I've tried all of the solutions mentioned in THIS document with no success. Can someone guide me on the correct way to include jQuery and a jQuery p ...

I made a mistake with my git repository. Should I try to fix it or just start fresh?

After spending months learning web development, I recently completed my first project. Unfortunately, right before deployment, I made a mistake with my backend git tree. I attempted to resolve the issue using suggestions from other resources, but none of ...

JavaScript: Issue with hiding input BUTTON element - still not resolved

<input id="btnupdate" type="button" value="Update" onclick="update()"/> <img id="loadupdate" src="http://localhost/connectu/styles/images/load_big.gif"> This particular HTML code snippet is generated by a PHP script in response to an AJAX requ ...

Why isn't preventDefault() effective in this particular situation?

When attempting to obtain an OTP, the event.preventDefault() function is functioning properly. However, after updating the register-form for OTP verification, the event.preventDefault() function ceases to work. How could this happen? Your assistance is gr ...

Issue encountered in Meteor/React app: Error message "ReferenceError: require is not defined" or "Error: Cannot

I am currently working on a school project that requires the use of Meteor with React. I have built a website and now I want to include a carousel feature. In order to achieve this, I attempted to utilize the following library: https://github.com/vazco/me ...

Steps to resolve the error message 'ReferenceError: hello is not defined' in your code

I'm currently working on a game development project, aiming to create a mining-themed game. One of the core features I'm implementing involves clicking a button to increase a numeric value. In my game setup, players click to collect ores, and the ...

Determining the dimensions of knockout-rendered elements

I've implemented knockout to display a list of clickable elements functioning as radio buttons. However, when too many elements are added horizontally, it overflows off the page. Currently, I'm breaking them into multiple rows, but this doesn&apo ...

How can I make the footer on my webpage have a white background?

My goal is to create a white div that spans from point (A) to point (B) on the page, just like in the image. I aim for it to stretch all the way down to cover the entire browser without showing any gray background underneath, even when the page is scrolled ...

Example TypeScript code: Use the following function in Angular 5 to calculate the total by summing up the subtotals. This function multiplies the price by the quantity

I have a table shown in the image. I am looking to create a function that calculates price* quantity = subtotal for each row, and then sum up all the subtotals to get the total amount with Total=Sum(Subtotal). https://i.stack.imgur.com/4JjfL.png This is ...

Show or hide a specific element based on whether a certain radio button is selected or deselected

After successfully displaying an element on radio button selection, I encountered the issue of the selected element remaining visible when another radio button in the group is chosen. What aspect am I overlooking? Regarding hiding elements with vanilla Ja ...

Adjusting the visibility of a div as you scroll

I'm trying to achieve a fade-in and fade-out effect on div elements when scrolling over them by adjusting their opacity. However, I'm facing difficulties in getting it to work properly. The issue lies in the fact that my div elements are positio ...

The novice image slideshow script in JavaScript is causing all images to disappear and generating errors

Trying to create a simple image slider that pulls information from various sources. CSS and HTML are set up properly, but adding the JavaScript logic causes all images to disappear. The console displays an error saying "Uncaught TypeError: Cannot read prop ...

Choose a random cell in Jquery every second

I am searching for a method to choose one div out of sixteen and change its CSS backgrounds. This selection needs to occur every second, so a new div is selected from the group each second. I am struggling with implementing the "every second" functionalit ...

The conversion function from string to integer is malfunctioning

I am currently working on a website where my client has the ability to modify their table_id. However, whenever I attempt to make these changes, the value in the database resets to 0. The table_id column is an integer type in MySQL, and I believe that&apos ...

angular table disabled based on condition

I have a table in my HTML file and I am trying to figure out how to disable the onClick function if the start date is greater than the current date. <ng-container matColumnDef="d"> <th mat-header-cell ...

Dispatching multiple selections to the server

My form includes multiple selects (using Select2) and I'm trying to submit the data to the server using HTML5's Formdata object. Everything works well when sending text or files, but not in this particular case. I've set the name attribute ...

Strategies for resolving duplicate jQuery code in my project

Trying to simplify my jQuery code that handles video selection and playback functionality. Users can click on a thumbnail or button to play a specific video, with the title of the video changing accordingly. Despite achieving the desired outcome, the cur ...

Issue with updated form input failing to submit the latest value

Below is my Vue template code: <form action="[path]/post.php" ref="vueForm" method="post"> <input type="hidden" name="hiddenfield" :value="newValue"> <input type="button" value="new value and submit" @click="changeVal(456)"> </form> ...

Adding @submit.prevent conditionally to a form in Vue.js

I'm attempting to employ conditional prevention of HTML form submission using @submit.prevent. I have a simplified generic form model structured like this: <v-form v-model="valid"> <div> <div v-for="(field, i) i ...

How to access a global jquery function variable inside a foreach loop

Is there a way to modify the value of a global jQuery variable inside a foreach loop each time a new model item is encountered? I am looking to update the calendar with new dates but I need access to certain functions within the foreach loop to achieve thi ...