separate lyers parameter vue

vue-cli3-webapp/src/components/GetLayerParameters.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="field is-horizontal">
+        <div class="field-label is-normal">
+            <label class="label">
+                <div v-if="particle==='bulk'"> bulk </div>
+                <div v-else-if="particle==='core-shell'"> core </div>
+                <div v-else> multi </div>
+            </label>
+        </div>
+        <div class="field-body">
+            <div class="field is-grouped is-grouped-multiline">
+                <input-with-units title="R" v-bind:units="units"
+                                  v-bind:value="layer.R"
+                                  @newdata="layer.R=$event"/>
+                <input-with-units title="Re(n)" units=""
+                                  v-bind:value="layer.reN"
+                                  @newdata="layer.reN=$event"/>
+                <input-with-units title="Im(n)" units=""
+                                  v-bind:value="layer.imN"
+                                  @newdata="layer.imN=$event"/> 
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script>
+    import InputWithUnits from "./InputWithUnits.vue";
+    export default {
+        name: "GetLayerParameters",
+        components: {
+            InputWithUnits
+        },
+        props: ['layer', 'particle', 'index', 'units']
+    }
+</script>
+
+<style scoped>
+    .binput {
+        display:flex;
+        align-items:center;
+        margin-left: 1rem;
+        width:5rem;
+    }
+</style>

vue-cli3-webapp/src/components/GetParticleParameters.vue

@@ -9,47 +9,59 @@
                     <b-radio v-model="particle" native-value="bulk"> bulk </b-radio>
                     <b-radio v-model="particle" native-value="core-shell"> core-shell </b-radio>
                     <b-radio v-model="particle" native-value="multilayer"> multilayer </b-radio>
+                    <div v-if="particle==='multilayer'">
+                        <b-input v-model="layersNum" type='number' min=1 max=10 class="binput"/>
+                    </div>
+                    <div v-else>
+                        <b-input v-model="layersNum" type='number' min=1 max=10 class="binput" disabled/>
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="field is-horizontal">
-            <div class="field-label is-normal">
-                <label class="label">Spherical particle</label>
-            </div>
-            <div class="field-body">
-                <div class="field is-grouped is-grouped-multiline">
-                    <input-with-units title="R" v-bind:units="units"
-                                      v-bind:value="layers[0].R"
-                                      @newdata="layers[0].R=$event"/>
-                    <input-with-units title="Re(n)" units=""
-                                      v-bind:value="layers[0].reN"
-                                      @newdata="layers[0].reN=$event"/>
-                    <input-with-units title="Im(n)" units=""
-                                      v-bind:value="layers[0].imN"
-                                      @newdata="layers[0].imN=$event"/>
-                </div>
-            </div>
-        </div>
+        <GetLayerParameters v-bind:layer="layers[0]"
+                            v-bind:units="units"
+                            v-bind:particle="particle"
+                            v-bind:index="index"
+        />
     </div>
 </template>
 
 <script>
-    import InputWithUnits from "./InputWithUnits.vue";
+    import GetLayerParameters from "./GetLayerParameters.vue";
     export default {
         name: "GetParticleParameters",
         components: {
-            InputWithUnits
+            GetLayerParameters
         },
         data () {
             return {
                 // TODO: Is it OK to modify Local later?
                 particle: 'bulk',
-                layersNum: 1
+                layersNum: 1,
+                index: 1
+
             }
         },
+        watch: {
+            // emit updated values
+            particle: {
+                handler: function () {
+                    if (this.particle === 'bulk') {this.layersNum = 1;}
+                    if (this.particle === 'core-shell') {this.layersNum = 2;}
+                    if (this.particle === 'multilayer') {this.layersNum = 3;}
+                }
+            },
+            deep: true
+        },
         props: ['layers', 'units']
     }
 </script>
 
 <style scoped>
+    .binput {
+        display:flex;
+        align-items:center;
+        margin-left: 1rem;
+        width:5rem;
+    }
 </style>

vue-cli3-webapp/src/components/GetUnits.vue

@@ -16,7 +16,7 @@
                     </b-select>
                 </div>
                 <div class="column">
-                    <b-checkbox v-model="isSourceOtherUnitsLocal"> Use other units for source</b-checkbox>
+                    <b-checkbox v-model="isSourceOtherUnitsLocal"> use other units for source</b-checkbox>
                 </div>
                 <div class="column">
                     <div v-if="isSourceOtherUnitsLocal">