Vue.js v-if for a checkbox selection of data from a csv
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'

          ]