title: What is the best way to post form with multiple components using Vue js
body: <p>as I'm on my Vue spree (started recently but so far I'm really enjoying learning  this framework) couple of questions rised up. One of which is how to post form from multiple components. So before I continue forward I wanted to ask you  what are you thinking about this way of structuring and point me in right direction if I'm wrong.</p>
  
  <p>Here it goes. 
  I'm working on a SPA project using ASP.NET CORE 2.1 and Vue JS Template (with webpack)(<a href="https://github.com/MarkPieszak/aspnetcore-Vue-starter" rel="noreferrer">https://github.com/MarkPieszak/aspnetcore-Vue-starter</a>) and my project is structured in several containers, something like this:
  In my app-root i registered several containers</p>
  
  <pre><code>&lt;template&gt;
  
    &lt;div id="app" class="container"&gt;
  
      &lt;app-first-container&gt;&lt;/app-first-container&gt;
      &lt;app-second-container&gt;&lt;/app-second-container&gt;
      &lt;!--&lt;app-third-container&gt;&lt;/app-third-container&gt;--&gt;
      &lt;app-calculate-container&gt;&lt;/app-calculate-container&gt;
      &lt;app-result-container&gt;&lt;/app-result-container&gt;
  
    &lt;/div&gt;   
  &lt;/template&gt;
  
  &lt;script&gt;
    // imported templates
    import firstContainer from './first-container'
    import secondContainer from './second-container'
    import calculateContainer from './calculateButton-container'
    //import thirdContainer from './third-container'
    import resultContainer from './result-container'
  
    export default {
      components: {
        'app-first-container': firstContainer,
        'app-second-container': secondContainer,
       // 'app-third-container': thirdContainer,
        'app-calculate-container': calculateContainer,
        'app-result-container': resultContainer
      }
    } 
  &lt;/script&gt;
  </code></pre>
  
  <p>In my first container I'm having several dropdowns and two input fields with my script file where I'm fetching data from API and filling dropdowns and input fields with fetched data.</p>
  
  <p>Something like this ( entered some dummy code for demonstration)</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;Crops table&lt;/h1&gt;
  
      &lt;p&gt;This component demonstrates fetching data from the server. {{dataMessage}}&lt;/p&gt;
  
      &lt;div class="form-row"&gt;
  
        &lt;div class="form-group col-md-6"&gt;
          &lt;label  for="exampleFormControlSelect1" class="col-form-label-sm font-weight-bold"&gt;1. Some text&lt;/label&gt;
          &lt;select class="form-control" id="exampleFormControlSelect1" v-model="pickedCropType" @change="getCropsByType()"&gt;
            &lt;option v-for="(cropType, index) in cropTypes" :key="index" :value="cropType.id" :data-imagesrc="cropType.imgPath"&gt;{{ cropType.name }}&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group col-md-6"&gt;
          &lt;label for="exampleFormControlSelect2" class="col-form-label-sm font-weight-bold"&gt;2. Some text&lt;/label&gt;
          &lt;select class="form-control" id="exampleFormControlSelect2"&gt;
            &lt;option v-for="(crop, index) in cropSelectList" :key="index" :value="crop.id"&gt;{{ crop.name }}&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
    import { mapActions, mapState } from 'vuex'
  
    export default {
      data() {
        return {
          cropTypes: null,
          cropSelectList: null,
          crops: null,
          pickedCropType: null,
  
        }
      },
  
      methods: {
        loadPage: async function () {
          try {
            //Get crop types and create a new array with crop types with an added imgPath property
            var cropTypesFinal = [];
            let responseCropTypes = await this.$http.get(`http://localhost:8006/api/someData`);
            responseCropTypes.data.data.forEach(function (element) {
  
              cropTypesFinal.push(tmpType);
            });
  
  
          } catch (err) {
            window.alert(err)
            console.log(err)
          }
        },
        getCropsByType: async function () {
          //Get crops by crop type
          let responseCrops = await this.$http.get(`http://localhost:8006/api/crop/Type/${this.pickedCropType}`);
          var responseCropsData = responseCrops.data.data;
          this.cropSelectList = responseCropsData;
        }
      },
  
      async created() {
        this.loadPage()
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>And in my second container I have different dropdowns and different input fields with different scripts etc.</p>
  
  <p>So, my questions are:</p>
  
  <p><strong>1.)</strong> I'm having required data form field in first container and in second container I'm having additional data and my submit button is separated in third container (app-result-container). So, is this proper and logical way of structuring containers if not can you point me in right direction?</p>
  
  <p><strong>2.)</strong> Is it smart to input script tag in every container where I'm processing/fetching/submitting some data for that particular container? Should I put scripts tag in separated file and keep structure clean, separating  html from js file.</p>
  
  <p>Example:
  import { something } from 'something'</p>
  
  <pre><code>export default {
    data () {
      return {
        someData: 'Hello'
      }
    },
    methods: {
      consoleLogData: function (event) {
        Console.log(this.someData)
      }
    }
  }
  </code></pre>
  
  <p><strong>3.)</strong> Can I send input values from one container to another (In my particular case from first and second container to app-calculate-container(third container))?</p>
  
  <p>How to on submit return results container with calculated imported values </p>