How do I ask the user for a confirmation before changing the option in a radio button using Vue.js?

Something like Are you sure? would be fine.

Solution :

Assuming you have the following DOM structure:

<div id=”app”>
<input type=”radio”/>
</div>

you can bind a @change directive to the radio button with a method implementing the expected “Are you sure?” confirmation popup. So you can enrich the above mentioned DOM structure like this:

<div id=”app”>
<input type=”radio” @change=”showConfirm”/>
</div>

And in the vue.js instance you can define the expected confirmation method, for example:

new Vue({
el: ‘#app’,

methods: {
showConfirm: function(event) {
event.preventDefault();
let checkedRadio = window.confirm(“Are you sure?”);
event.target.checked = checkedRadio;
}
}
})

Here you find the working example.