CODEWITHSUNDEEP
javascriptvue.js
Carlos Adrian
Carlos Adrian

Reputation: 31

Equivalent in Vue to deselect a radio button from a button with vanilla javascript

I have the following code in normal javascript:

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

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

What would be the correct way to do it with vue?

This is my code in Vue template:

<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:

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

What I don't know is how to access the id of the radio input from a method, or if there is another way. Thanks

Upvotes: 0

Views: 1575

Answers (2)

Carlos Adrian
Carlos Adrian

Reputation: 31

I solved it using querySelector to id of radius from method:

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

Upvotes: 1

Mohammad Salim Hosen
Mohammad Salim Hosen

Reputation: 303

I don't know how your filterResponse looks like but if your filterResponse contains object then you can add checked entry to every object and can toggle it easily.

     <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>

Example of filterResponse

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

If you only want false when clicking button then replace !flt.checked with false

Upvotes: 0

Related Questions