Best practice to manage repeating components/data?

Hi, please see attachment. It’s only 1 step of a huge form I’m working to.

I have not real Vue components, just plain html

  <div class="form-item">
    <input type="radio" name="screw[thread]" v-model="form.screw.thread" id="thread1" value="Metrica">
    <label for="thread1"><span class="name"><?php _e('Metrica', 'fiam'); ?></span><figure><img src="<?php echo_img_path('filetto-metriche.png'); ?>"></figure></label>
  </div>

And here’s some of the Vue code implemented

    Vue.prototype.screw_metrics_codes = ['DT','LG','DG','HT','DR','EX'];
    Vue.prototype.point_metrics_codes = ['a', 'b', 'c', 'd', 'e'];
    Vue.prototype.tightening_fields = ['torque', 'precision', 'speed'];
    Vue.prototype.sample_fields = ['screws', 'components', 'files', 'file_sharing'];

    var vueapp = new Vue({
      el: '.form-panels'
      ,data:{
        form:{
          contact:{}
          ,compiler:{}
          ,project:{}
          ,current_tools:{}
          ,screw:{ // nota: form.screw.files settato in configurator.js::add_dropzone()
            thread:'Metrica'
            ,thread_t:'Metrica'
            ,thread_image: 'filetto-metriche.png'
            ,type: "Svasata Piana" // todo: da localizzare i valori di default
            ,type_t: "Svasata Piana"
            ,type_image: 'vite-svasata-piana.png'
            ,metrics_DT:''
            ,metrics_LG:''
            ,metrics_DG:''
            ,metrics_HT:''
            ,metrics_HR:''
            ,metrics_EX:''
            ,washer_type: ''
            ,washer_type_t: ''
            ,washer_tip:'Con punta'
            ,washer_tip_t:'Con punta'
            ,drive_shape_other: ''
            ,drive_shape: "Phillips"
            ,drive_shape_t: "Phillips ®"
            ,drive_image: 'impronta-phillips.png'
            ,drive_type: ''
            ,material: 'Acciaio'
            ,material_t: 'Acciaio'
            ,finish: 'Nessuna'
            ,finish_t: 'Nessuna'
          }
          ,tightening:{
            type:''
            ,type_t:''
            ,precision:''
            ,torque:''
            ,speed:''
          }

[...]

      ,watch:{ // TODO: forse come per needs.custom_pipe_length_other, bisogna inizializzare la prop other nel model
        'form.screw.thread':function(val, oldval){
          var box = this.$refs.screw_thread_radios;
          this.form.screw.thread_t = box.querySelector('input[value="' + val + '"] + label .name').innerHTML;
          this.form.screw.thread_image = UrlUtilities.get_file_in_url(box.querySelector('input[value="' + val + '"] + label img').getAttribute('src'));
        }
        ,'form.screw.type':function(){
          var select = this.$refs.screw_type_select;
          var selected = select.options[select.selectedIndex];
          this.form.screw.type_t = selected.innerHTML;
          this.screw_metrics_codes.forEach(function(code, index){ this.form.screw['metrics_' + code] = ''; }.bind(this));
          this.form.screw.washer_type = '';
          if(this.form.screw.type !== 'Altro') document.querySelector('#drop-area-3').dropzone.removeAllFiles(true);
          var switched = selected.getAttribute('data-switch-option');

          if(switched && switched != 'screw-file-sharing-box'){
            this.form.screw.type_image = UrlUtilities.get_file_in_url(document.querySelector('.' + switched + ' img').getAttribute('src'));
          }
        }

An so on. It’ s all working properly. At the end of the form, last step, there’s a resume that shows all the user choices and inputs, updated in real time with Vue. Fine.

My main problem is that now my client wants me to create a system to duplicate parts of that form (groups of fields), and thus related data, based on certain user choices. For example, a select field that states how many screws the user wants (say 1 to 9 for ex.). Then I should duplicate N times the bunch of fields I’m attaching. And with them, duplicate/update data model and the final resume.

It’s a little scary to me. I don’t know what’s the best approach for doing this. I mean from a js/Vue point of view.

Could you please suggest me best practice I should follow in your opinion?

Anyone? :frowning:

Hi. I am doing a similar project with many fields for each object. I have created a repository for get, posting the object but also a function to return a new object with all fields set to usable defaults. Maybe this could be of help to you. Then you don’t need to repeat the fields for each screw but only do something like this


import screws from 'screwRepository'

data() {
 return {
   screw: screws.newScew(),
   anotherScrew: screws.newScew(),
   moreScrews: []
  }
}

methods: {
  addScrew() {
    this.moreScrews.push(screws.newScrew()
  }
}

Or do I misunderstand you?

Thank you very much, but I don’t fully understand what you mean. But maybe it’s me, I’m now aware of all the Vue mechanics. Anyway my main problem, is that , based on a user choice, I have to:

  • duplicate a bunch of fields
  • diplicate the related data objects
  • track all of the new fields to auto-fill the final resume

And I don’t know what’s the best path to follow to achieve that results.