Vue "Can I set the @input via v-bind=everything?"

by Admiral Potato

HTML

<div id="app">
  <input
    type="text"
    v-bind="allProps"
    v-on="allHandlers"
  />
  <h1>{{bob}}</h1>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

new Vue({
  el: "#app",
  data: {
    bob: 'goats'
  },
  computed: {
  	allProps () {
    	return {
      	value: this.bob
      }
    },
    allHandlers () {
    	return {
        input: this.update
      }
    }
  },
  methods: {
  	update (event) {
    	console.log('upate called!')
    	this.bob = event.target.value
    }
  }
})