0

I designed a form using vue.js where 1 of the element is select option dropdown. But when it loads, the default value doesn't show then when new target selected from the dropdown, it doesn't show too.

Using v-for to loop all options from an array, it runs and shows the list on click. But no default value displayed at the start.

tried to fix it from these links: Vue.js get selected option on @change, Set default value to option select menu

but no success

//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 just want the value to appear on default then update when selected to the new value.

thank you

user9088454
  • 1,076
  • 1
  • 15
  • 45
Kadir Jailani
  • 119
  • 1
  • 1
  • 15

1 Answers1

1

The default value that you're specifying is null so to the default one you should do something like :

 data: () => ({
  selectedSubject: 'Item 1',
   ....

   })

in the template try to bind the value in this way 

v-bind:value="subjectOption[index].value" 

<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="subjectOption[index].value"
   v-bind:key="index"
  >
   {{ option.text }}
  </option>
</select>
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
  • thank you very much for your help on this. i just realized that my CSS that make the element disappear. I put too much padding inside the element. btw i understand more clearly now on the logic from your answer. – Kadir Jailani Aug 06 '19 at 07:33