JSFiddle - React, Tailwind, and code Playground

by dapo

HTML

<script src="https://gistcdn.githack.com/dasDaniel/f3cebc1274339055729c6e887ca8d2ad/raw/8f0432bfd812c453cdecee61862963fe3e24119a/vue.global.js"></script>
<h2>
  Using Vue Composition API like it's react useState.
</h2>
<h3>
  Or, how to use <code>v-model</code> before it's supported.
</h3>

<div id="app"></div>

<template id="appTemplate">
  <input
         placeholder="email" 
         name="email"
         :value="form.email"
         @input="handleChange"
         />
  <br/>
  <input
         placeholder="password" 
         type="password"
         name="password" 
         :value="form.password"
         @input="handleChange"
         />
  <br/>
  Location: 
  <select
          name="location"
          :value="form.location" 
          @input="handleChange"
          >
    <option :selected="form.location === ''"></option>
    <option :selected="form.location === 'Canada'" value="Canada">Canada</option>
    <option :selected="form.location === '!Canada'" value="!Canada">!Canada</option>
  </select>
  <p>email: {{ form.email }}</p>
  <p>password: {{ form.password.length }} characters long</p>
  <p>location: {{ form.location }}</p>
</template>

JavaScript

const { ref, reactive, isRef } = Vue;

const fauxModel = (initialState) => {
  const state = {}
  Object.keys(initialState).forEach(k => {
    state[k] = ref(initialState[k])
  })

  const handleChange = (e) => {
    if(state[e.target.name]){
      state[e.target.name].value = e.target.value
    }
  }

  return [
    state,
    handleChange
  ]
}

const App = {
  setup() {
    const [form, handleChange] = fauxModel({
      email:'',
      password:'',
      location:'Canada'
    })

    return {
      form,
      handleChange
    };
  },
  template: document.getElementById('appTemplate').innerHTML
};

const app = Vue.createApp({});
app.mount(App, "#app");