如何禁用select选项的值？ （vue.js 2）

My component is like this :

我的组件是这样的：

<div id="demo">
  <div>
    <select class="form-control" v-model="selected" required>
      <option v-for="option in options" v-bind:value="option.id">{{ option.name }}</option>
    </select>
    {{selected}}
  </div>
</div>

var demo = new Vue({
  ...
  data() {
    return {
      selected: '',
      options: [{
        id: '',
        name: 'Select Category'
      }]
    };
  },
  ...
})

See full code and demo here : https://fiddle.jshell.net/oscar11/stvct9er/5/

请在此处查看完整代码和演示：https：//fiddle.jshell.net/oscar11/stvct9er/5/

I want disable "Select Category". So "Select category" disabled. User can not select it. User can only choose a value other than "Select Category".

我想禁用“选择类别”。因此“选择类别”已禁用。用户无法选择它。用户只能选择“选择类别”以外的值。

How can I do it?

我该怎么做？

2 个解决方案

#1

You should add option directly in select tag.

您应该直接在select标签中添加选项。

<select class="form-control" v-model="selected" required>
  <option value="" disabled>Select a category</option>
  <option v-for="option in options" v-bind:value="option.id">{{ option.name }}</option>
</select>

Also, remove it from data function.

另外，将其从数据功能中删除。

data() {
  return {
    selected: '',
    options: []
  };
}

I don't recommend you to add this option in the options array, because it is a placeholder attribute for your select.

我不建议您在options数组中添加此选项，因为它是select的占位符属性。

Here is working solution.

这是工作解决方案。

#2

Other option could be to disable that element using a binding

其他选项可能是使用绑定禁用该元素

  <option v-for="option in options" :disabled="!option.id"  v-bind:value="option.id">{{ option.name }}</option>

Working fiddle

工作小提琴