JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

<div id="vue">
  <base-input :some="map" @comp-update="onCompUpdate($event)"></base-input>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
body {
    background-color: #001018;
    color: #ddd;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
input[type="text"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 1px solid #1f5169;
    background-color: #183048;
    color: #00ddee;
    padding: 2px 0px 2px 4px;
    margin: 50px;
}

JavaScript

import { createApp, ref, reactive, watch, computed } from 'https://cdn.jsdelivr.net/npm/vue@3.0.2/dist/vue.esm-browser.js';

(function() {

  const ui = {
    setup() {
      const map = reactive(new Map([
        ['width', 800],
        ['height', 400]
      ]));

      function onCompUpdate(evt) {
        console.log(map.get('width'), map.get('height'), evt[0], evt[1]);
				map.set('width', Number(evt[0]));
        map.set('height', Number(evt[1]));
      }
      
      watch(map, (n,o)=>{
      console.log(n.get('width'), n.get('height'), o.get('width'), o.get('height'));
      });

      return { map, onCompUpdate };
    },
  };

  const vueApp = createApp(ui);

  vueApp.component('base-input', {
    props: ['some' ], emits: ['comp-update'],
    setup(props, { emit }) {

      let chars = ref(Array.from(props.some.values()).join(','));

      function checkInput(val) {
        emit('comp-update', val.split(','));
        chars.value = val;
      }

      return { chars, checkInput };
    },
    template: `<input type="text" spellcheck="false" :value="chars" @input="checkInput($event.target.value)"/>`
  });

  vueApp.mount('#vue');

})();