JSFiddle - React, Tailwind, and code Playground

by asemahle

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
<div id="app">
  <provider-form v-for='row in providerData' :row='row'></provider-form>
</div>

<template id='provider-template'>
    <fieldset class='fieldset'>
        <legend>{{row.legend}}</legend>
        <div class="row" v-for='item in row.fields'>
            <div class='small-8 columns'>
                {{item.label}}
            </div>
            <div class='small-4 columns'>
                <div class='input-group'>
                    <input type='number' class='input-group-field' v-model='item.value' v-if='item.disabled' disabled>
                    <input type='number' class='input-group-field' v-model='item.value' v-else>
                    <span class='input-group-label'>{{item.unit}}</span>
                </div>
            </div>
        </div>
    </fieldset>
</template>

JavaScript

Vue.config.debug = true;

new Vue({
    el: '#app',
    data: {
        providerData: {
            archive_cost: {
                legend: 'Warehouse cost',
                fields: {
                    monthly_room: {
                        label: 'Monthly cost of room',
                        value: 200,
                        unit: '$'
                    },
                    monthly_maintance: {
                        label: 'Monthly maintance cost',
                        value: 10,
                        unit: 'zł'
                    },
                    summary: {
                        label: 'Summary cost',
                        unit: '$',
                        value: 210,
                        disabled: true
                    }
                }
            }
        },
    },
    
    
    watch: {
        '[providerData.archive_cost.fields.monthly_room.value, \
        providerData.archive_cost.fields.monthly_maintance.value]': function() {
            this.providerData.archive_cost.fields.summary.value = 
                parseInt(this.providerData.archive_cost.fields.monthly_room.value) + 
                parseInt(this.providerData.archive_cost.fields.monthly_maintance.value);
        }
    },
    
    components: {
        providerForm: {
            template: '#provider-template',
            props: ['row']
        },
    }
});