JSFiddle - React, Tailwind, and code Playground

by wotamann

HTML

<head>
	  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
	  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
	  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
	  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
	</head>
	
	<body>
		<div id="app">
		<v-app>
		  <v-main>
			<v-container>
				<v-form-base 
          :model="model" 
          :schema="schema" 
          :col="{cols:12, sm:6, lg:4 }" 
          @input="log"
        />
			</v-container>
      
        <pre>   
        Model:        
        {{JSON.stringify(model, replacer, 3)}}
        </pre>        
        <br>
        <pre>
        Schema:
        {{JSON.stringify(schema, replacer, 3)}}
        </pre>
		  </v-main>
		</v-app>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
		<script src="https://unpkg.com/vuetify-form-base"></script>

	</body>

JavaScript

const fileObjectToString = (val) => `${val.name} - (File Object)` 
    new Vue({
		el: '#app',
		vuetify: new Vuetify(),
		components: { vFormBase },
		data () {
			return {      
			  model: {
				user: 'Base',
				password: 'abcdefgh',
				color:'#00E',
				slider: 50,
				checkbox:true,
				file: [] // array of File objects
			  },     
			  schema: {
				user: 'text',  // string shorthand 
				password: { 
				  type: 'password',
				  clearable: true
				},
				checkbox:'checkbox', // string shorthand
				slider: {
				  type:'slider',
				  label:'Slider'
				},
				color: { 
				  type: 'color',
				  ext:'text',
				  label:'Color'
				},				
				file: { 
				  type: 'file', 
				  label: 'Images', 
				  showSize:true,
				  counter:true,
				  multiple: true,
				}
			  }
			}
		},
		methods:{
			log(val){ 
				console.log(val) 
			}, 
      replacer (key, value) {
        if (typeof value === 'function') {
          return 'Function' 
        }
        if (Array.isArray(value) && value[0] instanceof File){
          // map Fileobject to Filename
          return value.map(i => fileObjectToString(i) )
        }
        if (value instanceof File) {
          return fileObjectToString(value)
        }
      return value
    }
		}
		})