JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  
  
  <input type="text" v-model="fullName">
</div>

SCSS

#app {
  display: block;
  padding: 1rem;
  font-size: 1rem;
}

.data-block {
  display: inline-block;
  background-color: #f1f1f1;
  padding: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #aaa;
  line-height: 2;
  font-size: 1.2rem;

button {
    font-size: 1.2rem;
  }
}

JavaScript

const vm = Vue.createApp({
  data () {
    return {
			firstName: 'Kuro',
      lastName: 'Hsu'
    }
  },
  computed: {
/*     fullName (){
      return `${this.firstName} ${this.lastName}`;
    } */
    fullName: {
      get(){
      	return `${this.firstName} ${this.lastName}`;
      },
      set(val){
				this.firstName = val.split(' ')[0];
				this.lastName = val.split(' ')[1];
      },
    }
  }
});

vm.mount('#app');