How to unselect a radio button in Vue using a button, similar to using vanilla JavaScript

Looking to translate this vanilla JavaScript code into Vue, here's the original:

const radio = document.querySelector('#radio');
const boton = document.querySelector('#boton');

boton.addEventListener('click', () => {
  radio.checked = false;
});

And here is the Vue template version:

<tr v-for="(flt, f) in filterResponse" :key="f">   
  <td>
    <input type="radio" 
    @change="someMethod()" 
    :id="f" 
    :checked="false">
  </td>
<button @click="uncheckRadio">Uncheck</button>

The method being used:

methods: {
  uncheckRadio(){
    //Logic goes here
  },
}

I am unsure of how to access the id of the radio input from a method, or if there is another approach. Appreciate any guidance, thank you!

Answer №1

My solution involved utilizing the querySelector to target the radius ID within the method:

const confirmed = document.querySelector(`#rbConfirmed${this.radioId}`);
confirmed.checked = false;

Answer №2

I am not sure what your filterResponse structure looks like, but if it contains objects, you can easily add a checked entry to each object and toggle it with ease.

     <tr v-for="(flt, f) in filterResponse" :key="f">
        <td>
            <input type="radio" 
            @change="someMethod()" 
            :id="f"
            :checked="flt.checked">
        </td>
        <td>
            <button @click="flt.checked = !flt.checked">Uncheck</button>
        </td>
    </tr>

Here is an example of the filterResponse:

        filterResponse: [
            {value: 1, checked: true}, 
            {value: 2, checked: true}, 
        ]

If you want false as the outcome when clicking the button, simply replace !flt.checked with false

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

When working with Typescript, an error may occur related to index types even though the constant object and its

I am struggling with understanding TypeScript, specifically when it comes to a problem I encountered. Hopefully, someone can shed some light on this for me. My issue revolves around a functional component that is responsible for displaying the correct com ...

Enhance efficiency with Bootstrap typeahead prefetch capability

Currently, I am utilizing the Bootstrap typeahead API to generate a real-time search feature. The source option is quite useful as it enables an AJAX call to retrieve data from the server. However, I am interested in preloading the source upon page load a ...

Run a chunk of HTML with dynamic PHP elements using JavaScript

Within a single .php file, there is a combination of HTML, PHP, and JavaScript. The JavaScript section is crucial for detecting the browser; if the browser is not Internet Explorer, JavaScript will trigger the HTML block containing PHP. Here is the JavaS ...

Is it possible for the connectedCallback() method within a Custom Component to have varying interpretations based on the specific context in which it is implemented?

I have recently developed a Custom Component that incorporates a Vue instance: class ContentCardExample extends HTMLElement { connectedCallback() { const card = document.createElement('div'); card.setAttribute("id", "app") card.i ...

Does running npm install automatically compile the library code as well?

I have a query regarding npm and its functionality. I also posted the same question on Reddit, but haven't received a satisfying answer yet. Let's use the jQuery npm package as a case study. Upon running the command npm install jquery, I notic ...

Extracting Object Properties in JavaScript with React

Code: const [obj, setObj] = useState(() => ({ a: valueA, b: valueB, get values() { if (!this.a || !this.b) { return []; } // code... } return [this.a, this.b] }, })); Values update: useEf ...

How to toggle tooltip visibility dynamically using Angular 2

I am working with elements within an ngFor loop. Some of these elements have tooltips, while others do not. I am experiencing an issue where when using the code snippet below: <div ngFor="let item of items"> <div [title]="item.title"> Ele ...

Ways to store information using VueJS lifecycle hooks

I am currently working on setting a data property using the created lifecycle hook within my component. The issue I'm encountering is receiving a "TypeError: Cannot read property 'summary' of undefined" in the console as I run the code. This ...

Issues with zDepth functionality in Material-UI (React.js) not being functional

Can anyone explain the concept of zDepth to me? I have a component with the following render method: render() { return ( <div> <AppBar zDepth={2} title="Some title" iconElementLeft={<IconButton onClick={this ...

What is the process for transferring image attributes to the server via a URL?

My data transmission process only involves sending data. Below is the data I send: export const cabin = { name: '001', maxCapacity: 2, regularPrice: 250, discount: 0, image: './cabins/cabin-001.jpg', description: ...

Issue with Nextjs environmental variables not functioning in JavaScript pages

Currently, I am in the process of developing a Next.js website. Within my JavaScript file, I am fetching data from an API and assigning a token using the .env.local file. However, when attempting to access the .env variable that I've set up, it seems ...

Allow editing for only a specific part of a text box

Creating a customized personal URL page for users on my site is important to me. I envision the value of a text box being "example.com/username," with the "example.com/" part displayed in the text box, but not editable. I've noticed that Tumblr accom ...

Implement jQuery to dynamically assign an "Active" class to tab elements based on the current page being loaded

INQUIRIES I have include: How do I apply a class to an element using jQuery, or any other method, for the active tab? Ensure that the dropdown tab appearing is the one containing the active tab, not always the Company one. In essence, I want the ac ...

What could be causing the issue with the exports field in package.json not functioning properly within

Recently, I created an npm package that includes three js files. Now, in my current project, I am aiming to import these js files using the following syntax: import MyButton from '@bslm/ui/MyButton' To achieve this, I made sure to specify the ex ...

Clearing a textarea in jQuery

I'm experiencing an issue that I can't seem to resolve on my own. Any assistance would be greatly appreciated. My function designed to clear a textbox upon click doesn't seem to be working correctly: $(function() { $('textarea#co ...

Animating Jquery to smoothly change opacity until it reaches 100% visibility

The script I have does several things, but the main issue lies in the last line where the opacity of the class doesn't seem to reach 100%.... $('.fa-briefcase').parent().on('click', function () { $("#colorscreen").remove(); ...

Vue.js is like the modern version of jquery-cron

Is there a similar tool to jquery-cron with an easy-to-use text/select interface that anyone knows of? I've come across vue-cron and point-vue-cron, but they seem too complicated for my needs. ...

What could be preventing the background color from changing when attempting to use style.backgroundColor?

My objective is to store the current tab background color in a variable and then use that variable to change the body color. However, for some reason it is not working as expected. Can you help me figure out why? const tabName = 'someId'; var ...

Challenges with unique scrollbar designs and dynamic tab loading using AJAX

Hello to all amazing members of stackoverflow, I'm facing some major challenges getting my custom scrollbar to function properly with ajax-based tabs. Any assistance you can provide would be immensely helpful. I have most of it set up and operational ...

Finding the nearest span value upon clicking through a specific class

Whenever a user clicks on a hyperlink, my goal is to locate the nearest span element with a specific class and retrieve the text within that class. As of now, it is only returning blank text: Here is the provided HTML code snippet: <div class="plan re ...