Vue Radio Confirmation

by Travis Smith

HTML

<div id="app">
  <input type="radio" id="initialValue" value="0" :checked="picked==='0'">
  <label for="initialValue">Choose One</label>
  <input type="radio" id="1" value="1" :checked="picked==='1'" @click.prevent="confirmClick">
  <label for="1">1</label>
  <input type="radio" id="2" value="2" :checked="picked==='2'" @click.prevent="confirmClick">
  <label for="2">2</label>
  </br>
  Picked: {{ picked }}
</div>

Vue

new Vue({
  el: "#app",
  data: {
  	picked: "0"
  },
  methods: {
		confirmClick: function(e) {
      console.log("value on click: " + this.picked);
      if(confirm("Are you sure?")) {
        this.picked = e.target.value;
        console.log("value on confirmation: " + this.picked);
      } else {
      	console.log("value on cancel: " + this.picked);
      }
    }
  }
})