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

【问题标题】：Default option in <select> not showing<select> 中的默认选项未显示
【发布时间】：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

标签： javascript html laravel twitter-bootstrap vue.js

【解决方案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 无法分配它。

【讨论】：