JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src='https://unpkg.com/[email protected]/dist/vue.js'></script>

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

JavaScript

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

new Vue({
  el: '#app',
  components: {
    userInverse: UserInverse
  },
  data: {
    userName: ''
  }
});