Binding Radio with Vue

Binding Radio with Vue

by superj80820

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div id="app">
  <form>
    <input type="radio" value="Taipei" v-model="selected"> 台北<br>
    <input type="radio" value="Taoyuan" v-model="selected"> 桃園<br>
    <input type="button" value="Try me" v-on:click="buttonEvent" :disabled="click"/>
</form>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    selected: '',
    click: false
  },
  methods: {
  	buttonEvent: function(){
    	if (this.selected !== '') {
    		this.click = true
      	setTimeout(() => {
          alert(`do ajax, requests ${this.selected}`)
          this.click = false
        }, 1000)
      }
      else alert('你沒選東西')
    }
  }
});