How to load data into a select input using vue js? - laravel

Question

I have a file called PostJobCreate.vue where an Employer can create a new job post.
I also have a table called locations with address columns and location_name column.
An employer can have many locations.
I'm trying to load the employers Locations into a select field so that when they create a new Job Post, they know what Location it is for.
I'm loading all of the employers locations in locations: [].
so I could get a column like this this.locations.location_name.
How can I load all of the location_name into a select field, so that a User can select the location the Job Post is for?
This is what I have so far very basic:
<b-form-group label="Location Name" label-for="location_name">
<b-form-select
v-model="locations.location_name"
:options=""
id="location_name"
size="sm"
>
</b-form-select>
<div class="invalid-feedback" v-if="errors.location_name">{{ errors.location_name[0] }}</div>
</b-form-group>
I want to load the location_name field for every record in the table, inside the :options. I might need a v-for, but I'm not sure what to do next.
PostJobCreate.vue:
<template>
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h3 class="card-title">Post a Job</h3>
<form class="forms-sample" v-on:submit.prevent="createJobPosts">
<b-form-group
label="Employment Type"
label-for="employment-type"
>
<b-form-radio-group
id="employment-type"
v-model="jobPostsData.employment_type"
:options="jobPostsData.optionsTwo"
name="employment-type"
>
</b-form-radio-group>
<div class="invalid-feedback" v-if="errors.employment_type">{{ errors.employment_type[0] }}</div>
</b-form-group>
<b-form-group label="Job Title" label-for="job_title">
<b-form-select
v-model="jobPostsData.job_title"
:options="jobPostsData.optionsThree"
id="job_title"
placeholder="Enter job title"
>
</b-form-select>
<div class="invalid-feedback" v-if="errors.job_title">{{ errors.job_title[0] }}</div>
</b-form-group>
<b-form-group label="Job Description" label-for="job_description">
<b-form-textarea
v-model="jobPostsData.job_description"
id="job_description"
placeholder="Enter job description"
:rows="10"
:max-rows="12"
class="mb-2"
></b-form-textarea>
<div class="invalid-feedback" v-if="errors.job_description">{{ errors.job_description[0] }}</div>
</b-form-group>
<b-form-group label="Salary Range" label-for="salary">
<b-form-select
v-model="jobPostsData.salary"
:options="jobPostsData.options"
id="salary"
size="sm"
>
</b-form-select>
<div class="invalid-feedback" v-if="errors.salary">{{ errors.salary[0] }}</div>
</b-form-group>
<b-form-group label="Location Name" label-for="location_name">
<b-form-select
v-model="locations.location_name"
:options=""
id="location_name"
size="sm"
>
</b-form-select>
<div class="invalid-feedback" v-if="errors.location_name">{{ errors.location_name[0] }}</div>
</b-form-group>
<b-row>
<b-col class="text-left">
<b-button type="submit" variant="success" class="mr-2"
><i class="mdi mdi-check-circle"></i> Save</b-button
>
</b-col>
</b-row>
</form>
</div>
</div>
</div>
</template>
<script>
import * as employerService from '../../../services/employer_service.js';
import * as employerLocationService from '../../../services/employer_location_service.js';
export default {
name: "postJobCreate",
data() {
return {
locations: [],
jobPostsData: {
job_title: null,
optionsThree: [
{ value: null, text: 'Please select an option' },
{ value: 'Budtender/Retail', text: 'Budtender/Retail' },
{ value: 'Delivery/Courier', text: 'Delivery/Courier' },
{ value: 'Security', text: 'Security' },
{ value: 'Grower/Horticulturalist', text: 'Grower/Horticulturalist'},
{ value: 'Master Grower', text: 'Master Grower'},
{ value: 'Extraction', text: 'Extraction'},
{ value: 'Chemist', text: 'Chemist'},
{ value: 'Trimmer', text: 'Trimmer'},
{ value: 'Packagers', text: 'Packagers'},
{ value: 'Manufacturing', text: 'Manufacturing'},
{ value: 'Edible Production', text: 'Edible Production'},
{ value: 'Sales', text: 'Sales'},
{ value: 'Marketing', text: 'Marketing'},
{ value: 'Management', text: 'Management'},
{ value: 'Executive Level', text: 'Executive Level'},
{ value: 'Other', text: 'Other'},
],
job_description: '',
employment_type: 'Freelance',
optionsTwo: [
{ value: "Freelance", text: "Freelance", },
{ value: "Full Time", text: "Full Time", },
{ value: "Internship", text: "Internship", },
{ value: "Part Time", text: "Part Time", },
],
salary: '40,000 and under',
options: [
{ value: '40,000 and under', text: '40,000 and under' },
{ value: '40,000-50,000', text: '$40,000-50,000' },
{ value: '50,000-60,000', text: '$50,000-60,000' },
{ value: '60,000-70,000', text: '$60,000-70,000' },
{ value: '70,000-80,000', text: '$70,000-80,000' },
{ value: '80,000-90,000', text: '$80,000-90,000' },
{ value: '90,000-100,000', text: '$90,000-100,000' },
{ value: '100,000-150,000', text: '$100,000-150,000' },
{ value: '150,000-200,000', text: '$150,000-200,000' },
{ value: '200,000-250,000', text: '$200,000-250,000' },
{ value: '250,000-300,000', text: '$250,000-300,000' },
{ value: '300,000-350,000', text: '$300,000-350,000' },
{ value: '350,000-400,000', text: '$350,000-400,000' },
{ value: '400,000-450,000', text: '$400,000-450,000' },
{ value: '450,000-500,000', text: '$450,000-500,000' },
{ value: '500,000-1,000,000', text: '$500,000-1,000,000' },
{ value: '1,000,000+', text: '1,000,000+' }
],
},
errors: {}
};
},
mounted() {
this.loadLocations();
},
methods: {
createJobPosts: async function() {
let formData = new FormData();
formData.append('job_title', this.jobPostsData.job_title);
formData.append('job_description', this.jobPostsData.job_description);
formData.append('employment_type', this.jobPostsData.employment_type);
formData.append('salary', this.jobPostsData.salary);
formData.append('location_name', this.locations.location_name);
try {
const response = await employerService.createJobPosts(formData);
this.$router.push('/post-a-job');
this.$toast.success("Job Post created Successfully!");
} catch (error) {
switch (error.response.status) {
case 422:
this.errors = error.response.data.errors;
break;
default:
this.$toast.error("Some error occurred, please try again!");
break;
}
}
},
loadLocations: async function() {
try {
const response = await employerLocationService.loadLocations();
this.locations = response.data.locations.data;
} catch (error) {
this.$toast.error('Some error occurred, please refresh!');
}
}
}
};
</script>
<style scoped>
</style>
Thank you.

Answer 1

You could Change the option field names as follows :
<b-form-select
v-model="selectedLocation"
:options="locations"
id="location_name"
size="sm"
value-field="location_name"
text-field="location_name"
>
...
selectedLocation should be defined in data as follows :
data() {
return {
locations: [],
selectedLocation:null
. ..