孤独プログラマー譚

孤独死が近い。

Vue.js 全て入力後に送信可能になるボタン

テキストフィールドに全て入力完了後、disabledが解除されて送信可能になるボタン。

f:id:halation-summer:20190112140948g:plain

<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と考え方が違って面白い。