Vue.js v-if for a checkbox selection of data from a csv I'm creating an option checkbox for an Organization data only if they have Organization data to submit from their CSV. I am creating a &lt;div&gt; and my &lt;select&gt; and &lt;option&gt; are wrapped inside of the &lt;div&gt;.

Do I need to create an input ? I'm in Vue.js and don't see any current methods or v-if nested in the right way. I want this selection of this checkbox to be done upon upload of the CSV and prior to submit. 

HTML

&lt;div class="large-12 medium-12 small-12 cell"&gt;
  &lt;input type="checkbox" id="organization" ref="Organization" v-model="checkbox" :v-if="field in requiredOrganizationFields"
  &lt;h1 class="mb-7 mt-5 ml-6 font-bold text-2xl"&gt; Organization Fields&lt;/h1&gt;
  &lt;div v-for="field in requiredOrganizationFields" class="p-8 -mr-6 -mb-6 flex flex-wrap" style="width:150px"&gt;
    &lt;label :for="field" type="select" name="field"&gt;{{field}}&lt;/label&gt;
    &lt;select :id="field" :name="field" v-model="mapping[field]" required&gt;
      &lt;option value=""&gt;Please Select&lt;/option&gt;
      &lt;option v-for="columnName in columnNames" :name="columnName" :value="columnName"  value=""&gt;{{columnName}}&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
&lt;/div&gt;


JavaScript

    data: null,
          columnNames: [],




  file: null,
  requiredContactFields: [ 
    'contact_account_name',
    'contact_first_name',
    'contact_last_name'
      ],
  optionalContactFields: [
    'contact_email',
    'contact_phone',
    'contact_address',
    'contact_city',
    'contact_region',
    'contact_postal_code'
      ],
  requiredOrganizationFields: [
      'organization_account_name',
      'organization_name'
      ],
  optionalOrganizationFields: [
      'organization_email',
      'organization_phone',
      'organization_address',
      'organization_city',
      'organization_region',
      'organization_postal_code'

      ]    

}





getColumnNames() {
  let formData = new FormData();
  formData.append('file', this.file);
  let self = this;
  axios
  .post('http://localhost:8080/api/contacts/csv-column-names',
  formData,
  {
    headers: {
      'Content-Type': 'multipart/form-data'

    }
  }

  )
  .then(function(response){
    console.log('SUCCESS!!');
    console.log(response);
    //Need array of column names you get from the back-end
    self.columnNames = response.data.column_names;


  })
  .catch(function(response){
    console.log('FAILURE!!');
    console.log(response);

  })


},
If you want to allow a user to be able to input an optional field after checking that check box it will go like this

You bind the field you want to make optional in your v-model. Upon the click event that optional field should dropdown 

HTML 

&lt;label&gt;&lt;/label&gt;
  &lt;input type="checkbox" name="show_organization_fields" v-model="showOrganizationFields"&gt;
  &lt;div v-if="showOrganizationFields"&gt;
   &lt;h1 class="mb-7 mt-5 ml-6 font-bold text-2xl"&gt;Organization Fields&lt;/h1&gt; 
   &lt;div v-for="field in requiredOrganizationFields" class="p-8 -mr-6 -mb-6 flex flex-wrap" style="width:150px"&gt;
    &lt;label :for="field" type="select" name="field"&gt;{{field}}&lt;/label&gt;
    &lt;select :id="field" :name="field" v-model="mapping[field]" required&gt;
      &lt;option value=""&gt;Please Select&lt;/option&gt;
      &lt;option v-for="columnName in columnNames" :name="columnName" :value="columnName"  value=""&gt;{{columnName}}&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;


Javascript

data: null,
      columnNames: [],



      showOrganizationFields: false,


      file: null,
      requiredContactFields: [ 
        'contact_account_name',
        'contact_first_name',
        'contact_last_name'
          ],
      optionalContactFields: [
        'contact_email',
        'contact_phone',
        'contact_address',
        'contact_city',
        'contact_region',
        'contact_postal_code'
          ],
      requiredOrganizationFields: [
          'organization_account_name',
          'organization_name'
          ],
      optionalOrganizationFields: [
          'organization_email',
          'organization_phone',
          'organization_address',
          'organization_city',
          'organization_region',
          'organization_postal_code'

          ]