Question

我遇到一个<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样式，但是并没有改变任何内容。我的问题：如何显示默认的选定选项？

P.S。对于我的后端来说，值得一提的是Laravel，但是我看不到它怎么会引起问题。

Answer 1

您选择的v模型已绑定 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"}
    ]
  }
})

Answer 2

感谢@Martin，他在评论部分促使我寻找其他地方，我找到了它。（@Cristian Incarnato在我回答时回答了问题）。我有一个C ++习惯，即使用null值初始化我的所有数据变量。所以我的数据变量被设置为：

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

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

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

此问题已解决。感谢所有人的帮助！

Answer 3

我有一个类似的问题，我的禁用选项没有显示在选择中，唯一缺少的是禁用（所需的默认值）选项上的 value 属性的绑定。

不工作：

 <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 无法分配它。

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

3 个答案: