<select> 中的默认选项未显示

Posted 2023-02-22

【中文标题】<select> 中的默认选项未显示

【英文标题】：Default option in <select> not showing

【发布时间】：2020-10-24 13:01:57

【问题描述】：

我遇到了<select> 的愚蠢问题。我选择的工具链是带有 Bootstrap 的 Vue.js，我正在尝试创建一个动态的 <select> 填充 Vue。然而我的问题是<select> 中的默认选项没有显示，而是表单元素是空白的。

这是我的编码，输入组与 Bootstrap 文档中提供的示例几乎相同。我也尝试了this question 中提到的建议，但没有奏效。

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label
        class="input-group-text"
        for="action_manufacturer_input">Manufacturer</label>
  </div>
  <select
      v-model="form.manufacturer"
      class="custom-select"
      id="manufacturer_input">
    <option disabled selected value="undefined">Please select one...</option>
    <option
        v-for="manufacturer in manufacturers"
        v-bind:value="manufacturer.id">
       manufacturer.display_name  :  manufacturer.full_name 
    </option>
    <option v-on:click="toggle_input()">Add new manufacturer...</option>
  </select>
</div>

作为健全性检查，我删除了 Bootstrap 样式，但这并没有改变任何东西。我的问题：如何让默认选择的选项显示？

附：值得我的后端是 Laravel，但我不明白它会如何导致问题。

【问题讨论】：

有趣。试着去掉disabled。

@Taplar 不，我试过了。我也尝试删除该值。没有雪茄

你还有代码吗？将它放入 Vue fiddle 对我来说效果很好。

@Martin 除了用于填充制造商数据集的 Axios 之外，我没有其他相关代码，您特别想查看哪些代码？我没有对默认引导 css 进行任何更改。

然后 that 或其他东西正在破坏您的代码，因为只需将您提供的内容添加到 vue 和 bootstrap 4 的小提琴中即可按预期显示所有内容。 codepen.io/mbacode/pen/ZEQvZdG

【参考方案1】：

感谢@Martin，他在 cmets 部分提示我去别处寻找并找到它。 （@Cristian Incarnato 在我回答问题时回答了这个问题）。我在 C++ 中有一个习惯，即使用 null 值初始化我的所有数据变量。所以我的数据变量被设置为：

  data() 
    return 
      form: 
        manufacturer: null,
      
    ;
  ,

通过将上面的内容更改为以下内容：

  data() 
    return 
      form: 
        manufacturer: "Please select one...",
      
    ;
  ,

这解决了问题。感谢大家的帮助！

【参考方案2】：

您选择的 v-model 与 form.manufacturer 状态

绑定

form.manufacturer的价值是什么？

您需要面对这一点，因为 Vue 正在搜索与 form.manufacturer 的值匹配的选项。

我创建了这个codepen 作为示例

<div id="app">

  <!--Bind select value with form.category-->
  <select name="options" v-model="form.category">

    <!--Add an empty (no value) option-->
    <option :value="null">Choose a Category</option>

    <!--Add options when value is id-->
    <option v-for="category in categories" 
            :key="category.id"
            :value="category.id"
    >
      category.name
    </option>
  </select>
  <br><br>

  <!--See how the state change when option select change-->
  <div>Value of Category: form.category</div>
</div>

var app = new Vue(
  el: '#app',
  data: 
    form:
      category: null
    ,
    categories: [
      id: 1, name:"Category 1",
      id: 2, name:"Category 2",
      id:3, name:"Category 3"
    ]
  
)

【讨论】：

在下面查看我的答案，但是是的，我正在将值初始化为 Vue 找不到的东西。谢谢你的回答！

【参考方案3】：

我遇到了类似的问题，我的 disabled 选项没有显示在 Select 中，唯一缺少的是 value 属性在 disabled（所需的默认值）选项上的绑定。

不工作：

 <option disabled value="null">Select one</option>

对比短手工作：

 <option disabled :value="null">Select one</option>

长格式工作：

 <option disabled v-bind:value="null">Select one</option>

请注意第一个示例中的 value 属性没有绑定到任何东西，因此 Vue 无法分配它。