Vue

by WILLIAM CORREA

HTML

<div id="app">
  <input v-model="object.name" class="upper">
  <hr>
  <input v-model="object.email" class="lower">
  <div class="console">
    <pre v-for="log in logging"><template v-for="data in log">{{ data }} </template></pre>
  </div>
</div>

CSS

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

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

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}

.console {
  background: #060606;
  color: #eaeaea;
  margin: 10px 0;
  padding: 10px;
  overflow: auto;
}

.console pre {
  margin: 0 0 10px 0;
}

Vue

new Vue({
  el: "#app",
  computed: {
  	toSave () {
    	return {
      	name: String(this.object.name).toUpperCase(),
        email: String(this.object.email).toLowerCase()
      }
    }
  },
  data: () => ({
    object: {
    	name: 'William',
      email: '[email protected]'
    },
    logging: []
  }),
  methods: {
  	log (...args) {
    	this.logging.push(args)
    }
  },
  watch: {
  	'object.name' (name) {
    	this.log('~> object.name', name)
    },
  	object: {
    	handler (object) {
        this.log('~> object', this.toSave)
      },
      deep: true
    }
  }
})