I created a form using vue.js that includes a select option dropdown. However, the default value does not display when the form loads, and when a new option is selected from the dropdown, it also does not show.
When I use v-for to loop through all options from an array, it successfully displays the list upon click. But I am still unable to get the default value to show at the beginning.
I have tried to troubleshoot this issue by consulting the following resources: Vue.js get selected option on @change, Set default value to option select menu
Unfortunately, I have not been successful in resolving the problem.
//DOM
<select
v-on:change="selectSubject($event)"
v-model="selectedSubject"
class="form-control form-control-lg"
id="selectSubject"
>
<option value="" disabled>Choose subject</option>
<option
v-for="(option, index) in subjectOption"
v-bind:value="option.value"
v-bind:key="index"
>
{{ option.text }}
</option>
</select>
//Logic
export default{
name: "form-block",
data: () => ({
selectedSubject: null,
subjectOption: [
{ text: 'Item 1', value: 'Item 1' },
{ text: 'Item 2', value: 'Item 2' },
{ text: 'Item 3', value: 'Item 3' },
{ text: 'Item 4', value: 'Item 4' },
{ text: 'Item 5', value: 'Item 5' },
],
}),
methods: {
selectSubject (event) {
console.log(event.target.value);
}
}
}
I simply want the default value to be displayed initially, and then update accordingly when a new option is selected.
Thank you for your help.