Select first option by default using v-model - vue.js

Question

Can someone help with this problem? I have a dynamic select dropdown. The first default option of "Choose your location" is not visible by default. This is because of v-model. How can I get that working?
My parent component:
<template>
<div>
<Segments #select-segment-location-event="updateSegmentLocation" :segmentLocation="segmentLocation" />
</div>
</template>
My child component:
<template>
<div class="container">
<select v-model="segmentLocation" #change="selectSegmentLocation">
<option selected disabled>Choose your location...</option>
<option v-for="(segLoc, index) in segmentLocations"
:key="index"
:value="segLoc">{{ segLoc.name }}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
segmentLocations: [
{ value: "Residential", name: 'Residential building' },
{ value: "Workplace", name: 'Workplace' },
{ value: "Hospitality", name: 'Hospitality or Retail' },
{ value: "Real Estate", name: 'Real Estate' },
{ value: "Commercial Parking", name: 'Commercial Parking' },
{ value: "Fleets", name: 'Fleets' },
{ value: "Cities & Governments", name: 'Cities & Governments' },
{ value: "Corridor", name: 'Highway, Corridor or Petrol Station' }
],
}
}
methods: {
selectSegmentLocation() {
this.$emit('select-segment-location-event', this.segmentLocation);
}
}
};
</script>

Answer 1

From what I see, the segmentLocation variable is passed as a prop to the Segments component.
You should avoid mutating a prop with v-model in the child component, because each component should only mutate it's own state.
I propose a few changes, add a new selectedSegmentLocation variable in your data method, with a default value of "NOT_SELECTED" :
data() {
return {
selectedSegmentLocation: "NOT_SELECTED",
segmentLocations: []
}
}
Then, in your template, update the Choose your location... option to have a value attribute:
<option selected value="NOT_SELECTED" disabled>Choose your location...</option>
Now, update the v-model and the selectSegmentLocation method to use the new variable:
<select v-model="selectedSegmentLocation" #change="selectSegmentLocation">
selectSegmentLocation() {
this.$emit('select-segment-location-event', this.selectedSegmentLocation);
}
If you still want to use the passed prop segmentLocation as a default value, use it in the created() hook, but you should have 'NOT_SELECTED' as the default value if you want to show the 'Choose your location' option.
created() {
this.selectedSegmentLocation = this.segmentLocation ? this.segmentLocation : "NOT_SELECTED";
}
And, if you want to be able to change the selected value from the parent, you can watch the segmentLocation property:
watch: {
segmentLocation() {
if (this.segmentLocation) {
this.selectedSegmentLocation = this.segmentLocation;
}
}
}