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.