The Vue.js input for checkboxes and radios fails to toggle when both :checked and @input or @click are used simultaneously

Check out this example on JSFiddle!

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <label>                   
    <input 
    type="checkbox"
            name="demo"
    :checked="isChecked"
            @input="someMeth('A')" 
    value="A"/> 
    A
 </label>
 <label>
    <input
    type="radio" 
    name="demo"
    :checked="isChecked"
    @input="someMeth('B')" 
    value="B"/> 
    B
 </label>
 <div>
  {{somedata}}
 </div>
</div>

When clicking on the input (checkbox or radio button), its status does not toggle.

The issue could be solved by removing either :checked or @input, but both are necessary in this case.

Alternatively, using @click would yield a similar result.

Answer №1

In Vue.js, the value of a checkbox is bound using the v-model directive.

new Vue({
  el: '#app',
  data: {
    checktype: 'checkbox',
    somedata: [],
    isChecked: false,
    isChecked2: false,
  },
  methods: {
    someMeth(val) {
      this.somedata.push(val)
    }
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
    <label>
        <input 
            :type="checktype"
            :name="demo"
            v-model="isChecked"
            @input="someMeth('A')" 
            value="A"/>
            A
    </label>
    <lable>  
        <input
            :type="checktype" 
            :name="demo"
            v-model="isChecked2"
            @input="someMeth('B')" 
            value="B"/>
            B
    </lable>
    <div>
        {{somedata}}
    </div>
</div>

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

What is the method for incorporating parameters into an array filter?

Imagine having an array containing multiple duplicate objects. How can we create a condition to specifically identify objects with certain criteria, such as matching IDs, duplicate status, and duplicate dates? The goal is to only display the object with th ...

Using a React component to import a module for publishing on NPM

Creating my first React component for NPM publication has been quite the learning experience. I decided to use the react-webpack-component package from Yeoman to kickstart my project. However, upon installing and importing my component into a React app, I ...

Linking an element's class to the focus of another element in Angular

In my Angular application, I have multiple rows of elements that are wrapped with the myelement directive (which is a wrapper for the input tag). To highlight or focus on one of these elements at a time, I apply the .selected class in the styles. Everythi ...

Uncover the structure of a regular expression pattern to discover the quantity of tokens and the size of the anticipated matches

I am looking to validate certain fields in my forms by determining the number of tokens and length specified by a particular regular expression. For example, For the pattern [0-9]{3},[0-9]{2}, I need to identify 5 as the length and 2 as the number of to ...

Update the JSON data based on the specifications outlined in my project

class Transformation { constructor() { this.colHeaders = { error_description: "Description", error_status: "Status", error_code: "Error Code" }; } getColHeader() { return this.colHeaders; } } var jsonData = { error ...

Why does my element appear to be a different color than expected?

I've developed a sleek wind map (check out for reference). Using a weighted interpolation every 10ms, I generate uVector and vVector data to calculate wind speed. Based on this speed, each point is assigned a specific color as outlined below. if (we ...

Differentiating between mouseenter and tap events: What's the key?

When a mouseenter event is present, touch-enabled devices will activate this event when the user taps on the element. Is there a way to differentiate between an actual physical mouse entering and a simulated tap (which resembles a mouse enter)? ...

A JavaScript function that fetches the color name based on either the RGB value or the Hexadecimal value

Looking for a JavaScript function that can determine the name of a color. Would like the JavaScript function to be structured as shown below: function getColorName(r, g, b) { .... return <color name>; // such as blue, cyan, magenta, etc. } ...

Exploring the method of retrieving nested JSON objects in Angular

When my API sends back a JSON response, my Angular application is able to capture it using an Interface. The structure of the JSON response appears as follows: { "release_date":"2012-03-14", "genre_relation": ...

Tips for reintroducing a previously deleted shape into the canvas using Konva

I recently removed a rectangle from the scene using the remove() method. Now, I am trying to figure out how to draw it back. According to the documentation: "remove a node from parent, but don't destroy. You can reuse the node later." Here is the li ...

Retrieve the attributes of DOM elements following a successful AJAX request

Is there a way to retrieve the video duration using video.duration following my ajax video upload? Despite achieving ajax success, this function continues to return NaN. I have attempted methods such as $.when().then or $.when.done() but with no success. ...

Tracking user sessions using cookies, not relying on JavaScript like Google does

Currently, I am working in an environment that utilizes PHP on the server side and Javascript on the client side. In order to monitor user sessions, I regularly send a JS PUT request to the server every 5 seconds. This allows me to gather data such as the ...

Utilizing NLP stemming on web pages using JavaScript and PHP for enhanced browsing experience

I've been exploring how to incorporate and utilize stemming results with JavaScript and PHP pages on web browsers. After running node index.js in the VS Code terminal, I was able to retrieve the output word using the natural library: var natural = re ...

Creating an Interactive Form with Laravel and Vue.js to Store and Modify Database Entries

Can someone help me with creating a simple input box that fetches the default value from a database and updates the database when the user changes the value? I am working on a project using Laravel 5.5 and Vue components. The initial value should be retrie ...

Issues with Fetch API and CORS in Web Browsers

Hello, I'm encountering an issue related to CORS and the Fetch API when using browsers. Currently, my setup involves running a NodeJS server built with Express on localhost:5000. This server responds to a GET request made to the URL /get_a, serving ...

I'm having trouble with my TextGeometry not displaying on screen. Can someone help me figure

Here is the code I am using for Three.js: <html> <head> <title>My first Three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> ...

Developing a personalized Magento2 extension with added support for PWA technologies

Greetings, fellow developers! I find myself at a crossroads when it comes to PWA and custom Magento 2 extensions. As a backend developer for Magento, my knowledge of PWA frontend implementation is lacking. Currently, I am in the process of developing an SE ...

Why is it possible for me to call a function that is defined below a component?

My understanding was that in Javascript, functions could not be invoked if they are defined below where they're called (unless hoisting is involved). However, I discovered something interesting while working with React. The code snippet below actuall ...

Converting numerical elements in an array to strings

Looking for assistance with reformatting the values in this Array : [{abcd:1, cdef:7},{abcd:2, cdef:8}, {abcd:3, cdef:9}] I want to convert all the values into strings like so : [{abcd:"1", cdef:"7"},{abcd:"2", cdef:"8"}, {abcd:"3", cdef:"9"}] Can anyo ...

Is there a way to retrieve the dynamically generated text content of an element using document.write?

I am encountering an issue similar to the following: <div id="myDiv"><script>document.write('SOMETHING');</script></div> My goal is to extract the content inside the script tag, which in this case is "SOMETHING" ...