JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src='https://unpkg.com/vue@2.4.4/dist/vue.js'></script>

<div id='app'>
  <h1>{{userName}}</h1>
  <input v-model='userName'/>
  <br />
  <br />
  <user-inverse :change-name-fn='changeName' :user='userName'></user-inverse>
</div>

JavaScript

UserInverse = {
  props: ['user', 'changeNameFn'],
  template: '<div>\
    <h2>{{userName}}</h2>\
    <input v-if="userName" v-model="userName"/>\
  </div>',
  computed: {
    userName: {
      get: function(){
        return this.user;
      },
      set: function(name) {
        this.changeNameFn(name);  
      }
    }
  }
};

new Vue({
  el: '#app',
  components: {
    userInverse: UserInverse
  },
  data: {
    userName: ''
  },
  methods: {
    changeName: function(name) {
      this.userName = name;
    }
  }
});