JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div id="app">
  Numbers: <input v-model="numberIn" v-on:input="convert"/>
  <div>
    Roman: {{numeralOut}}
  </div>
</div>

JavaScript

new Vue({
	el: '#app',
	data: function() {
  	return {
    	numberIn: "12",
    	numeralOut: "XII",
      numerals: [{char: "I", val: 1}, {char: "V", val: 5}, {char: "X", val: 10}, {char: "L", val: 50}, {char: "C", val: 100}, {char: "D", val: 500}, {char: "M", val: 1000}]
    }
  },
  
  methods: {
  	convert() {
    	let newNumeral = this.fetchNumeral(this.numerIn);
    	this.numerals = newNumeral.string;
    },
    
    fetchNumeral(n) {
    	let numeralString = "";
      
      $each.numerals.forEach((numeral, index) => {
      	if(n > numeral.val) {
        	let prevNumeral = this.numerals[index-1];
        
        	numeralString += prevNumeral.char;
          n -= prevNumeral.val;
        }
      });
    
    	return {string: numeralString, num: n};
    }
  }
})

// I | V | X  | L	 | C	 | D	 | M
// 1 | 5 | 10 | 50 | 100 | 500 | 1000