CODEWITHSUNDEEP
javascripthtmlcssvue.js
johnnyrocket33
johnnyrocket33

Reputation: 131

Placeholder disappearing with v-for

I'm trying to add a placeholder on a dropdown field. It works on the first dropdown field, without a v-for, but it doesn't pop up on the next one. Screenshot for reference: https://i.sstatic.net/FVEHn.jpg

My code looks like this:

<div class="row">
  <div class="clg2 cmd3 csm4 cxs12">
    <label class="bold">Option</label>
  </div>
  <div class="clg5 cmd6 csm8 cxs12">
   <select required
      v-model="thing.Option"
      :disabled="isDisabled(thing)"
      @keydown.enter="$event.stopPropagation()"
   >
     <option disabled value="" hidden>Select Option</option>
       <option>Option 1</option>
       <option>Option 2</option>
   </select>
  </div>
</div>

<div class="row">
  <div class="clg2 cmd3 csm4 cxs12">
    <label class="bold">Thing Type</label>
  </div>
  <div class="clg5 cmd6 csm8 cxs12">
   <select required
      v-model="thing.Metadata['ThingType']"
      :disabled="isDisabled(thing)"
      @keydown.enter="$event.stopPropagation()"
   >
     <option disabled value="" hidden>Select Thing Type</option>
     <option v-for="thingType in supportedThingTypes()" :key=thingType>{{ thingType }}</option>
   </select>
  </div>
</div>

Any idea how to fix this? Thank you in advance!

Upvotes: 0

Views: 45

Answers (1)

WhatzzUp
WhatzzUp

Reputation: 169

Check your

v-model="thing.Metadata['ThingType']"

content, i guess your v-model doesn't contain your placeholder option value="" so it selected an not existing "empty" value

Check out my working JsFiddle: https://jsfiddle.net/q6kfmcb8/2/

<option 
   disabled 
   value="" // <-- thing.Metadata['ThingType'] has to be "" if you wanna select your placeholder option
   hidden>
   Select Thing Type
</option>

Upvotes: 1

Related Questions