时间戳

首页 > 解决方案 > 占位符随着 v-for 消失

javascript - 占位符随着 v-for 消失

问题描述

我正在尝试在下拉字段中添加占位符。它适用于第一个下拉字段，没有v-for，但不会在下一个下拉字段中弹出。截图供参考：https ://imgur.com/a/6xYsYxU

我的代码如下所示：

<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>

知道如何解决这个问题吗？先感谢您！

标签： javascripthtmlcssvue.js

解决方案

检查你的

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

内容，我猜你的 v-model 不包含你的占位符选项value=""所以它选择了一个不存在的“空”值

查看我的工作 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>

推荐阅读