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 <div> and my <select> and <option> are wrapped inside of the <div>.
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
<div class="large-12 medium-12 small-12 cell">
<input type="checkbox" id="organization" ref="Organization" v-model="checkbox" :v-if="field in requiredOrganizationFields"
<h1 class="mb-7 mt-5 ml-6 font-bold text-2xl"> Organization Fields</h1>
<div v-for="field in requiredOrganizationFields" class="p-8 -mr-6 -mb-6 flex flex-wrap" style="width:150px">
<label :for="field" type="select" name="field">{{field}}</label>
<select :id="field" :name="field" v-model="mapping[field]" required>
<option value="">Please Select</option>
<option v-for="columnName in columnNames" :name="columnName" :value="columnName" value="">{{columnName}}</option>
</select>
</div>
</div>
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);
})
},
