Input error when adding Shelf loses entry for Shelf Height

This change gets most the the way there, but option elements for select#traysize_id are not populated by Vue after the vueActor.updateTraysizeList() call. So, document.getElementById('traysize_id').value = ... fails to assign a value.

diff --git a/src/Template/Shelves/add.ctp b/src/Template/Shelves/add.ctp
index 5292d5b..7315d33 100644
--- a/src/Template/Shelves/add.ctp
+++ b/src/Template/Shelves/add.ctp
@@ -20,7 +20,7 @@
         ?>
         <div class="input select">
             <label for="traysize_id">Tray size</label>
-            <select name="traysize_id" form="add_shelf">
+            <select id="traysize_id" name="traysize_id" form="add_shelf">
                 <option value=""></option>
                 <option v-for="value in cur_traysizes" :value="value.id">{{value.text}}</option>
             </select>
@@ -32,12 +32,12 @@

 </div>
 <script type="text/javascript">
-    new Vue({
+    vueActor = new Vue({
         el: '#app',
         data: {
             info: [],
             statusModel: 2,
-            input_height: 0,
+            input_height: <?php if ($shelf->shelf_height) {echo $shelf->shelf_height;} else {echo 0;} ?>,
             traysizes: [],
             cur_traysizes: [{0:'type in shelf height first'}]
         },
@@ -61,6 +61,7 @@
               .get('<?=  $this->Url->build(["controller" => "Traysizes",
                                             "action" => "listAllTraysizes"]); ?>')
               .then(response => (this.traysizes = response['data']))
+              .finally( function () { vueActor.updateTraysizeList(); document.getElementById('traysize_id').value = '<?= $shelf->traysize_id ?>'; } );
         }
     })
 </script>

Maybe swap out the Vue code for native javascript for maintainability?

ulsdevteam / lcsu

Input error when adding Shelf loses entry for Shelf Height #32