Vue.js 全て入力後に送信可能になるボタン
テキストフィールドに全て入力完了後、disabledが解除されて送信可能になるボタン。
<div id="app"> <div><input v-model="field1"></div> <div><input v-model="field2"></div> <div><input v-model="field3"></div> <div>{{ entered_all }}</div> <button :disabled="!entered_all">submit</button> </div>
new Vue({ el: '#app', data: { field1: '', field2: '', field3: '', }, computed: { entered_all () { const required_fields = [ this.field1, this.field2, this.field3, ] return required_fields.indexOf('') === -1 }, }, })
jQueryはDOMからD0Mを直接触っていたが、
Vue.jsはViewModelを介す必要があるから、jQueryと考え方が違って面白い。