Javascript 中的默认选项未显示

我遇到了一个愚蠢的问题。我选择的工具链是带引导的Vue.js，我正在尝试创建一个用Vue填充的动态。但是，我的问题是，中的默认选项未显示，而表单元素为空

这是我的代码，输入组与引导文档中提供的示例几乎相同。我也尝试了中提到的建议，但是它们不起作用

制造商 请选择一个。。。 {{manufacturer.display{u name}}:{{{manufacturer.full{u name}} 添加新的制造商。。。 作为一个健全的检查，我删除了引导样式，但这并没有改变任何东西。我的问题：如何获得要显示的默认选定选项

---

另外，值得一提的是，我的后端是Laravel，但我不认为它会导致问题。

您选择的v型与form.manufacturer state绑定

form.manufacturer的价值是什么

您需要检查一下，因为Vue正在搜索与form.manufacturer的值匹配的选项

我创建了这个示例

<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"}
    ]
  }
})

---

感谢@Martin，他在评论部分提醒我去别处看看，我找到了它@克里斯蒂安回答了我的问题。我有一个C++的习惯，用空值初始化所有的数据变量。因此，我的数据变量被设置为：

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

将上述内容更改为以下内容：

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

---

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

有趣。试着脱掉它。@Taplar不，我试过了。我还尝试删除该值。没有cigarDo你还有密码吗？将其放入Vue小提琴中，对我来说显示得很好。@Martin除了用于填充制造商数据集的Axios之外，我没有任何其他相关代码，您特别希望看到哪些代码？我不会对默认的引导css进行任何更改。然后，这或其他东西会破坏您的代码，因为只需将您提供的内容添加到vue和bootstrap 4中，即可按预期显示所有内容。请参见下面的答案，但是的，我正在将该值初始化为Vue找不到的值。谢谢你的回答！